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，但要使其正常工作，我们必须在粘贴后移动鼠标。我想避免这种情况。提出其他建议。

See image here

Answer 1

您应该使用“输入”

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

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

3 个答案: