jQuery popBox – a textarea popup extension for small text boxes

This plugin provides a simple to use popup textarea extension for textboxes.

If you have ever come accross the situation where you have a bunch of text boxes that you want the user to fill in, for example in the back admin system of a site, but it is annoying for the user to try and type in text in a small box and you do not want to launch a full blow text editor, this plugin will automatically popup a textarea for text input.

A perfect addition for backend admin systems. Simple, effective and fast.

This plugin can be applied to a textbox or textarea (see notes on textarea usage). Basically if the user clicks on a textbox which has popBox applied to it, a nice modal popup box will appear with the textarea selected for the user to enter their text, if they click outside of the area or on the ‘done’ button it will dissapear and the text will be inserted into the initiating textbox.

The other cool thing is the user can tab into a textbox, the popup will appear with the cursor set inside it, they can then continue to type, hit tab and be taken back out and continue to tab to the next textbox – similiar to tabbing through a spreadsheet.

All the styling is done in CSS, no images, the button is also CSS. Rounded corners will degrade properly in IE. There is no animation or clever tricks as I wanted it to be fast, I have a page with rows of textboxes that this is applied to and it needs to be quick and responsive. Future additions may include animation, styling options etc. It comes with CSS which can be modified as you like.

Hitting the ‘Escape Key’ will back out any changes you make and cancel the operation.

 

jQuery plugin page: http://plugins.jquery.com/project/popBox

A demo can be found here: http://simon.tpdserver2.co.uk/jquery/popBox/demo/

Usage is very simple.

1. Include jQuery (I use the Google CDN)

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script&gt;

2. Inlcude the popBox.js or the minified version popbox.min.js and the popbox.css files

<script src=”js/popBox/popBox1.2.1.min.js” type=”text/javascript”></script>
<link href=”js/popBox/popBox1.2.1.css” rel=”stylesheet” type=”text/css” />

3. Apply to your textbox:

$(document).ready(function () {
$(‘#input-box’).popBox();
});

Thats it! simple.

Optional arguments are:

height: popup textarea height
width: popup textarea width
newlineString: the newline string to use when copying the text back to the original textbox

Note: As the html textbox (input type=”text”) does not support newline chars this plugin will replace newlines with ‹br›. This can be changed using the options, for example if you want to apply this plugin to an existing textarea (which is small) you can set newlineString to be ‘\n’ and it will be preserved.

Options examples:

$(‘#input-box’).popBox({width:500});

$(‘#input-box’).popBox({width:500, newlineString: “\n” });

Please note this is a very first release based on my own basic needs. If it proves popular it can easily be expanded with options and settings.