How to enable a button on pasting something using mouse?

Question

I have a textbox and a button. The functionality is that whenever textbox is empty, button is disabled and if not empty then button is enabled. I am doing this using following jQuery code:

$('#user_field').keyup(function(){
if($(this).val().length !=0){
    $('#btn_disabled').removeAttr('disabled'); 
    $('#btn_disabled').attr('class', 'upload_button_active');
}
else{
    $('#btn_disabled').attr('disabled',true);
    $('#btn_disabled').attr('class','upload_button_inactive');
       
}
})

However, when I am trying to paste input using mouse, the button is not enabling. I have tried binding other mouse events like mousemove, but for that to work we have to move the mouse after pasting. I want to avoid that. Suggest something else.

See image here

what about registering a generic `input` event instead of `keyup`? `$('#user_field').on('input', funtion(){` — briosheje, Nov 23 '18 at 11:17
Okay, so try this: https://stackoverflow.com/questions/686995/catch-paste-input, though input **should work**. — briosheje, Nov 23 '18 at 11:21

score 0 · Accepted Answer · answered Nov 23 '18 at 11:21

You should use 'input'

$("#tbx").on('input',function(){
  var tbxVal=$(this).val();
  if(tbxVal.length===0){
    $("#btn").prop("disabled",true);
  }else{
    $("#btn").prop("disabled",false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tbx">
<button id="btn" disabled>Button</button>

brk · Answer 2 · 2018-11-23T11:32:02.900

0

You can use the paste event and retrieve the value of the input inside a setTimeout

$('#user_field').on('paste input', function() {
  setTimeout(() => {
    if ($(this).val().length !== 0) {
      $('#btn_disabled').removeAttr('disabled');
      $('#btn_disabled').attr('class', 'upload_button_active');
    } else {
      $('#btn_disabled').attr('disabled', true);
      $('#btn_disabled').attr('class', 'upload_button_inactive');

    }
  }, 1000)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='user_field'>
<button id='btn_disabled' disabled='disabled'>Click</button>

edited Nov 23 '18 at 11:32

answered Nov 23 '18 at 11:21

brk

43,022
4
37
61

I also have to consider normal input from keyboard other than pasting via mouse. 'input' event worked. – bob Nov 23 '18 at 11:31
you can pass multiple events – brk Nov 23 '18 at 11:32

score 0 · Answer 3 · answered Nov 23 '18 at 11:34

0

Just Call the function on change. It will take your input event from mouse as well.

$("#textBox").change(function(
 var val=$(this).val();
  if(val.length===0){
  $("#btn").prop("disabled",true);
 }else{
  $("#btn").prop("disabled",false);
 }
});

answered Nov 23 '18 at 11:34

aditya agnihotri

36
3

How to enable a button on pasting something using mouse?

3 Answers3