Call function for disabled elements

Question

I have a function that works perfectly if you want to expand an input type=text with more than 20 characters. My problem is, how to apply this function for disabled inputs? To better understand the behavior of my function check my example on fiddle: http://jsfiddle.net/DCjYA/168/

$('input[type!="submit"]').focus(function(){
    if ($(this).val().length > 20) {
        $(this).attr('data-default', $(this).width());
        $(this).animate({width: 300}, 'slow');
        $(this).parent().addClass('cooling');
    }
}).blur(function(){ 
    var w = $(this).attr('data-default');
    $(this).animate({
        width: w
    }, 'slow');
    $(this).parent().removeClass('cooling');
});

Thank you.

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

Since you can't get to focus an disabled element you should build a workaround for this. Or use another function for this?

EDIT: Probably this could be helpful for you: Event on a disabled input

edited May 23 '17 at 12:03

Community

1
1

answered Jan 23 '12 at 08:10

Daniel

157
2
12

and how do I integrate this in my function: not really want to use another function :(( – mcmwhfy Jan 23 '12 at 08:21

score 0 · Accepted Answer · answered Jan 23 '12 at 09:24

As Daniel said the focus and blur event will not work with the disabled input. Then for this purpose, hover, mouseenter or mouseover, mouseleave or mouseout are the events can be used but i could not find it working but i do found mousemove for expanding it. you can use it it it solve your problem.

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

fiddle : http://jsfiddle.net/raj_er04/DCjYA/174/

Call function for disabled elements

2 Answers2