jQuery not working if input field is prefilled (toggle clear function)

Question

I've found a jQuery script here at Clear icon inside input text which brings a clear-icon inside an input field. It fits perfect in my website. But it's not working, when the input value is prefilled.

Demo at jsbin

I tried several onchange(), change() in additon to mousemove and also replaced in the script itself and the following in html:

<body onLoad="tog(v);">

JS

function tog(v){return v?'addClass':'removeClass';} 

$(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');   
}).on('click', '.onX', function(){
    $(this).removeClass('x onX').val('');
});

But it did'nt help. Do you have any solution?

That's correct. But it let's easily type in something in the value attribute. — doschni, Jul 27 '14 at 15:28

score 2 · Accepted Answer · answered Jul 27 '14 at 15:25

2

You need to trigger input event programmatically using .trigger()

  $('.clearable').trigger('input');

DEMO

answered Jul 27 '14 at 15:25

Satpal

132,252
13
159
168

1

Wow Satpal, thanks a lot for your fast and working solution! You made my day ;-) – doschni Jul 27 '14 at 15:48

jQuery not working if input field is prefilled (toggle clear function)

1 Answers1