Tag Archives: textbox

jQuery + Javascript: How to Select all Text in a Textbox CodeUnit 10 MAY 2010

I have a nice little inline editing function attached to one of my administrative pages which basically lists a whole lot of tag names currently saved on the system.

When you click on the tag name, it gets replaced by a textbox containing the name, allowing you to edit and then save your changes.

In order to make the experience a little more streamlined, I wanted to set it up so that when clicking on the tag name the text box should appear directly in its place, with all the characters in the textbox highlighted (i.e. selected) and with browser focus firmly on the box.

Achieving this turns out to be pretty simple.

Basically, plain old vanilla JavaScript already gives us the functionality to focus on an input element as well as select all characters in that element. So, we stuff that into its own little function:

function selectAllText(textbox) 

{

  textbox.focus();

  textbox.select();

}

We then attach this function to the moment the textbox appears in place of the original label, binding it to the click event of the label element:


$('#tagname').click(function(){

$(this).hide();

$('#textboxtag').show();

selectAllText($('#textboxtag'));

});

There, all done! (Now wasn’t that nice and simple stuff?)

AutoComplete Country Selection using jQuery CodeUnit 12 MAR 2010

Marc-Antoine Ross has knocked together a great little jQuery plugin, or extension if you will, which gives you a nice autocomplete country selector textbox (with little flags).

So in order for someone to provide you with their nationality, all they now need to do is start typing in a little form textbox provided and after two letters or so, they can simply select from the available drop down list the country which they wish to list.

The extension uses Jorn Zaefferer’s Autocomplete jQuery plugin, FamFamFam’s flag icon set and Aral Balkan’s ISO country data source in case you were wondering.

Related Link: http://www.devtaxi.com/tools/accountry/