Question

The following jsfiddle … http://jsfiddle.net/mqVUU/ … is a simple input field UI tweak. The goals are:

• on focus, enlarge the input (via animate)
• on focus, select current input content
• when ‘enter’ is pressed in the input, blur the input
• on blur, shrink the input

Here’s the script so far …

$('input').on({
    focus: function(){
        $(this).animate({'width':200}, 300, 'easeInOutBack');
        $(this).select();
    },
    keydown: function(e){
        if (e.keyCode == 13) {
            $(this).blur();
        }
    },
    blur: function(){
        $(this).animate({ 'width':100}, 300, 'easeInOutBack');
        $('#result').html( $(this).val() );
    }
});

Can anyone help with these questions …

1. If I put it in the animate() callback, anything the user types while the animation is occurring gets overwritten, which is problematic. So what’s the best way to get the select() working properly?
2. Is the keydown parameter really the only way to accept enter as a trigger??

Thanks for any pointers 🙂

Answer 1

In webkit browsers (Chrome and Safari), a simple .select() doesn’t always work, because the default action for mouseup is to clear the selection. So you need to add this handler:

mouseup: function(e) {
           e.preventDefault(); 
        }

As far as the keydown — that is the best way to do it. There are others, but they won’t give you any advantage.