Question

我正在尝试验证表单中的文本输入，以使用javascript和Jquery构建基本转换器。使用addEventListener函数，我能够调用一个对应于选项＆＃34; 2＆＃34;，＆＃34; 10＆＃34;和＆＃34; 16＆＃34;来自Select标签。

问题在于它只适用于第一次＆＃34;更改＆＃34; Select标签上的事件以及当我从base减少时。例如：如果我选择base 2然后更改为10或16，它仍然只接受0或1个字符，而从16更改为10或2它可以正常工作。我该如何解决？

这是我的代码：

＆＃13;

$(document).ready(function() {
  var getFromBase = document.getElementById('frombase-select');

  getFromBase.addEventListener('change', function() {
    switch (getFromBase.value) {
      case '2':
        $('#number').keypress(function(key) {
          if ((key.charCode < 48 || key.charCode > 49) && (key.charCode != 13)) {
            return false;
          }
        });
        break;

      case '10':
        $('#number').keypress(function(key) {
          if ((key.charCode < 48 || key.charCode > 57) && (key.charCode != 13)) {
            return false;
          }
        });
        break;

      case '16':
        $('#number').keypress(function(key) {
          if ((key.charCode < 48 || key.charCode > 57) && (key.charCode < 97 || key.charCode > 102) && (key.charCode < 65 || key.charCode > 70) && (key.charCode != 13)) {
            return false;
          }
        });
        break;
    } // End switch
  }); // End addEventListener
}); // End document.ready

＆＃13;

.wrapper {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

form {
  font-size: 20px;
  width: 300px;
  text-align: center;
  border: 1px solid black;
  padding: 20px;
}

form>* {
  margin: 10px 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <form action="index.php" method="post">
    <div class="form-group flex-center">
      <label>From Base:</label>
      <select id="frombase-select" name="frombase">
        <option selected disabled hidden>Enter a base</option>
        <option>2</option>
        <option>10</option>
        <option>16</option>
      </select>
    </div>
    <div class="form-group flex-center">
      <label>Number:</label>
      <input type="text" id="number" name="number">
    </div>
  </form>
</div>

＆＃13;

Answer 1

问题在于事件处理程序堆积如山。您永远不会重置处理程序，因此第一个选定基础的验证永远不会被解除。这会导致事件仅触发第一个选定案例的回调。

您可以使用off删除以前的处理程序。来自文档：

描述：删除事件处理程序。

<强> .off( event )

<强>事件

输入：事件

jQuery.Event对象。

您只需将事件名称作为字符串传递即可删除事件处理程序。演示off以删除事件处理程序：

$("#number").off("keypress"); //Callback is optional

Here's一个更新的小提琴。

根据Select标记中的addEventListener切换不起作用

1 个答案: