javascript - 如何修复浏览器移动 View 中未定义问题的 jQuery 'length'？

Question

我正在创建输入表单，用户可以在其中添加一些文本。如果输入值为空，则禁用提交按钮，如果输入文本，则启用提交按钮。 我创建的代码运行良好，但是当我使用移动或触摸 View (chrome dev.tools toggle device toolbar)时不起作用。我认为问题出在触摸上，但我无法解决。

$('#imgText').on('keyup keypress', function() {
  if($(this).val().length >= 1) {
      $("#generate-img").removeClass("no-click");
    }
});
$('#imgText').on('keyup', function() {
  if($(this).val().length == 0) {
    $("#generate-img").addClass("no-click");
  }
});

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

Answer 1

您可以使用 jQuery 的 .on('input')方法来捕获对字段值所做的更改。

$(document).ready( function() {
  $('#imgText').on("input", function() {
    if($(this).val().length == 0) {
      $("#generate-img").addClass("no-click");
    } else {
      $("#generate-img").removeClass("no-click");
    }
  });
});

.no-click {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="imgText">
<input id="generate-img" type="submit" class="no-click">