JQuery animate () unselect text in Firefox

Here's the code:

$("#textyt:input").focus(function() {
 $(this).animate({width:"545px"},500).css("color","#614A3E");
 $(this).select();
 $(this).mouseup(function(e){
  e.preventDefault();
 });
});

      

If I remove the animation effect, this focus event selects the text (as I would like). With animation effect, text is deselected when animation is running in Firefox. This works fine in Safari as it is. Is there a way to ensure that the text is selected when the animation ends in FF? Thank!

+2


source to share


1 answer


Try using:

 this.focus();
 this.select();

      

after animation.



This will allow you to select the text after the animation is complete. Width animation works by dynamically changing the CSS width property and may lose focus in firefox, but it would be better to change the width of the container element rather than the actual textbox.

$("#textyt:input").focus(function() {
    $(this).animate(
        {width:"545px"}, 500, function(){
            this.focus();
            this.select();
        }).css("color","#614A3E");
     $(this).select();
     $(this).mouseup(function(e){
         e.preventDefault();
     });
});

      

+3


source







All Articles