Question

What is wrong with .mousemove because wont to do noting on IE8. Must expand the disabled inputs with value > 20 characters. Only on IE8 is not working.
And another thing, why isn’t dragging back after cursor is on other element.

$('input[disabled]').mousemove(function(){
      if ($(this).val().length > 20) {
       $(this).attr('data-default', $(this).width());
       $(this).animate({width: 300}, 'slow');
      }
});

Check the fiddle:
http://jsfiddle.net/DCjYA/183/

thank you.

Answer 1

In this case you should be using the readonly attribute instead as this will allow further interaction with the input box.

your css

    input{
        margin:10px;
    }
    input.readonly {
        color: grey;
        cursor:default
    }

and your form

<form action="form_action.asp" method="get">
      First name: <input type="text" name="fname" value="Foghorn Leghorn Foghorn Leghorn" readonly="true" class="readonly" /><br />
      Last name: <input type="text" name="lname" value="" readonly="true" class="readonly" /><br />
      Last name: <input type="text" name="lname" value="Foghorn Leghorn" readonly="true" class="readonly" /><br />
  <input type="submit" value="Submit form" style=""/>
</form>

and your jQuery

    $('input[readonly]').mousemove(function(){
       if ($(this).val().length > 20) {
                $(this).attr('data-default', $(this).width());
                $(this).animate({width: 300}, 'slow');
                $(this).parent().addClass('cooling');
              }
    });