如何修复浏览器移动视图中未定义问题的jQuery“长度”？

Question

我正在创建输入表单，用户可以在其中添加一些文本。如果输入值为空，则禁用提交按钮，如果输入文本，则启用提交按钮。 我创建的代码运行良好，但是当我使用移动视图或Touch视图（chrome开发工具切换设备工具栏）时无法正常工作。我认为问题是Touch，但我无法解决。

$('#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">

Answer 2

您可以在移动设备上使用此方法

$(document).ready( function() {
  $('#imgText').on("keyup 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">