如何启用使用鼠标粘贴内容的按钮？

Question

我有一个文本框和一个按钮。功能是每当文本框为空时，按钮将被禁用，如果不为空，则按钮将被启用。我正在使用以下 jQuery 代码执行此操作：

$('#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');
       
}
})

但是，当我尝试使用鼠标粘贴输入时，该按钮未启用。我曾尝试绑定其他鼠标事件，如 mousemove，但要使其正常工作，我们必须在粘贴后移动鼠标。我想避免这种情况。建议其他东西。

Answer 1

你应该使用'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>

Answer 2

您可以使用 paste 事件并在 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>

Answer 3

只需在更改时调用函数。它也会从鼠标获取您的输入事件。

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

如何启用使用鼠标粘贴内容的按钮？

How to enable a button on pasting something using mouse?

javascript

jquery

mouseevent

jquery-events