Width / height animation resets caret position in Firefox

Width / height animation resets caret position in Firefox

Greetings,

When a user clicks inside an input field, I want to change its appearance a bit. The point is that it then becomes clear that the field is editable through an animation. This should happen while keeping the cursor/caret right on the spot where the user clicked. This seems rather obvious, but it does not work in Firefox in certain cases.

I created this simplified test case:

  1. <html>
    <head>
        <title>Test</title>
        <style type="text/css">
    input {
        width: 150px;
        height: 40px;
        padding: 10px;
        margin: 20px;
    }
        </style>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
    $(function(){
        var status = new Array(0, 0, 0, 0);
        
        $("#inp0").click(function(e){
            $(this).animate({height: (status[0]=!status[0]) ? '50px' : '40px'}, 'fast');
        });
        
        $("#inp1").click(function(e){
            $(this).animate({width: (status[1]=!status[1]) ? '140px' : '150px'}, 'fast');
        });
        
        $("#inp2").click(function(e){
            $(this).animate({margin: (status[2]=!status[2]) ? '30px' : '20px'}, 'fast');
        });
        
        $("#inp3").click(function(e){
            $(this).animate({padding: (status[3]=!status[3]) ? '5px' : '10px'}, 'fast');
        });
    });
        </script>
    </head>
    <body>
    <div>
        <input id="inp0" type="text" value="Change height"/><br/>
        <input id="inp1" type="text" value="Change width"/><br/>
        <input id="inp2" type="text" value="Change margin"/><br/>
        <input id="inp3" type="text" value="Change padding"/>
    </div>
    </body>
    </html>









































For a change, this works as expected in Internet Explorer, but not in Firefox. That is to say:

- If I click in the middle of the text "Change height" or "Change width" in Firefox (3.5.7), then the caret position will be reset to the end of the field. This happens both when the animation starts and when it ends.
- If I do the same in the input boxes for margin or padding in Firefox, it -does- work as expected (caret position does not change).
- If I click inside any of the input boxes in Internet Explorer (any version), the caret remains where it is. In particular, edits can even be made while the animation is going on, which is the behaviour I need. I did not test it in other browsers.

The same problem arises if the animations are performed on the field's parent (even if the field's width / height is not 100% and thus does not change), i.e. on the div in this example.

I realise I can 'save' en 'load' back the caret position before and after the animation, but I am hoping there is a better solution (since this is both cumbersome, and the user can not double click (select) a word or edit during the animation).

If 'mousedown' is used instead of 'click', the first two input boxes don't even get the focus, while the last two still work.

I am using jQuery 1.4.1.


thank you!
Sygmoral