带有“keyup”和“change”参数的 jQuery on() 方法在移动设备上不起作用

Posted 2023-05-09

【中文标题】带有“keyup”和“change”参数的 jQuery on() 方法在移动设备上不起作用

【英文标题】：jQuery on() Method with 'keyup' and 'change' arguments doesn't work on mobile devices

【发布时间】：2021-10-16 12:47:09

【问题描述】：

我正在尝试禁用提交按钮以在提交之前检查是否所有输入字段都已填写。下面的代码在桌面上运行良好，但在移动设备上却不行。我错过了什么吗？

jQuery(function($) 
$('button.wof-btn-submit').attr('disabled', true);
$('[data-wof-field~="primary_email"]').on('keyup change drop paste', function(event)  
 
        validateInputs();
    );
​
    $('[data-wof-field~="text_2"]').on('keyup change drop paste', function(event) 
        validateInputs();
    );
​
    $('[data-wof-field~="number_1"]').on('keyup change drop paste', function(event) 
        validateInputs();
    );
​
    $('[data-wof-field~="text_1"]').on('keyup change drop paste', function(event) 
        validateInputs();
    );
​
    function validateInputs()
        var disableButton = false;
​
        var val1 = $('[data-wof-field~="primary_email"]').val();
        var val2 = $('[data-wof-field~="text_2"]').val();
        var val3 = $('[data-wof-field~="number_1"]').val();
        var val4 = $('[data-wof-field~="text_1"]').val();
​
        if(val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0)
            disableButton = true;
​
        $('button.wof-btn-submit').attr('disabled', disableButton);
    
);

这里是link

提前致谢，

【问题讨论】：

您可以尝试使用input event，它应该替换您的change、keyup 和paste（不确定drop）

您的事件正确触发但 html btn disabled=false 不起作用，因此您应该删除属性 if(!disableButton) $('button.wof-btn-submit').removeAttr('disabled');

@secan，我已经替换了输入但无济于事，即使在桌面上也无法使用。

【参考方案1】：

jQuery(function($) 
  $('button.wof-btn-submit').attr('disabled', true);
  $('[data-wof-field~="primary_email"]').on('keyup change drop paste', function(event) 

    validateInputs();
  );
  $('[data-wof-field~="text_2"]').on('keyup change drop paste', function(event) 
    validateInputs();
  );
  $('[data-wof-field~="number_1"]').on('keyup change drop paste', function(event) 
    validateInputs();
  );
  $('[data-wof-field~="text_1"]').on('keyup change drop paste', function(event) 
    validateInputs();
  );

  function validateInputs() 
    var disableButton = false;

    var val1 = $('[data-wof-field~="primary_email"]').val();
    var val2 = $('[data-wof-field~="text_2"]').val();
    var val3 = $('[data-wof-field~="number_1"]').val();
    var val4 = $('[data-wof-field~="text_1"]').val();

    if (val1.length == 0 || val2.length == 0 || val3.length == 0 || val4.length == 0) 
      disableButton = true;
      $('button.wof-btn-submit').attr('disabled', 'disabled')
    

    if (!disableButton) 
      $('button.wof-btn-submit').removeAttr('disabled');
    
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wof-form-wrapper">
  <div class="wof-error wof-fgcolor" style="color:#dd0000;border-color:#dd0000;display: none;"></div>

  <div class="wof-form-fields">
    <div>
      <input type="email" placeholder="Your email" data-wof-field="primary_email" class="wof-input" name="wof-email">
    </div>
    <div>
      <input type="text" placeholder="Phone Number" data-wof-field="text_2" class="wof-input">
    </div>
    <div>
      <input type="number" placeholder="Transaction Number" data-wof-field="number_1" class="wof-input">
    </div>
    <div>
      <input type="text" placeholder="Full Name" data-wof-field="text_1" class="wof-input">
    </div>
  </div>

  <button class="wof-btn-submit wof-color-2" type="submit" disabled="disabled">
    <span>Try your luck</span>
    <div class="wof-loader" style="display: none;">
      <div class="b1"></div>
      <div class="b2"></div>
      <div></div>
    </div>
  </button>

  <div class="wof-response"></div>
</div>

【讨论】：

感谢@fatima，这在台式机上运行良好，问题出在移动设备上，我使用了您的 sn-p，但该按钮在移动设备上仍处于禁用状态。

@Richu 是事件触发还是？

它正在台式机（笔记本电脑）上触发，但显然它不适用于移动设备。 link

@Richu 我认为它的值检查失败。尝试使用不同的值并尝试对其进行测试。原因事件正在触发。

不，这很奇怪，它适用于 Blisk 而不是 chrome。