select text on focus

Question

ive got this function and it works to select text on click

function select_text(ev) {
    if (this.createTextRange)
    {
        // This is for IE and Opera.
        range = this.createTextRange();
        range.moveEnd('character', this.value.length);
        range.select();
    }
    else if (this.setSelectionRange)
    {
        // This is for Mozilla and WebKit.
        this.setSelectionRange(0, this.value.length);
    }
}

using:

$('input').click(select_text);

but i would like to select the text when a textfield is focused (its focused with jquery when i hit enter in another textfield).

i have tried this:

$('input#id').focus(select_text);

but it didnt work. could someone tell me how to write for this to work.

EDIT: the element that is going to be focused and selected is added with ajax! forgot to tell you that. ive tried this one but it didnt work:

$("#settings_view #password #new_password").live('keyup', function(event) {
    if(event.keyCode == 13)
    {
        $("#settings_view #password #password_beam").html('Enter password:<input id="password_confirm" type="password" value="0123456789" />');
        $('input#password_confirm').focus(function (e) {
            var element = this;
            setTimeout(function () {
                select_text.call(element, e);
            }, 0);
        });
    }
});

i also tried this for live:

$("#settings_view #password #new_password").live('keyup', function(event) {
    if(event.keyCode == 13)
    {
        $("#settings_view #password #password_beam").html('Enter password:<input id="password_confirm" type="password" value="0123456789" />');
        $('input#password_confirm').live('focus', function (e) {
            var element = this;
            setTimeout(function () {
                select_text.call(element, e);
            }, 0);
        });
    }
});

but it didnt work as well. some ideas?

Answer 1

The focus event happens before click, and the click event causes the selection to change.

Likewise, I think that keyup happens after focus when you use enter or tab to a field and causes the same side effect.

It's gross, I know, but I would handle it this way:

$('input').focus(function (e) {
    var element = this;
    setTimeout(function () {
        select_text.call(element, e);
    }, 0);
});

This basically ensures that select_text() gets called after event handling for the entire focus change is completed.

Answer 2

I tested your code, and it worked for me: http://jsbin.com/esuwe

It worked without this change, but I would suggest you make this change as well if you always want the text to be selected when the box has focus via tab, click, or focus()

Right before your closing } of the select_text function, add return false;

function select_text(evt){
   ...

   return false;
}

And change click to mouseup.

$('input#id').mouseup(select_text).focus(select_text);

This keeps your click from resetting the selection to a specific spot in the textbox.