javascript - 通过 getElementById 检查输入长度不起作用

Question

function checkLength(input) {
  var element = document.getElementById('t').value;
  if(document.calculator.t.value.length == 10) {
    alert("ivalid length - 10 characters only!");
  }
  if(element.value.length > 10) {
    alert("ivalid length - 10 characters only!");
  }
}

<form name="calculator">
  <input type="text" maxlength="10" name="answer" id="t" onkeyup="isAllowedSymbol(this);checkLength(this); " placeholder="Enter data" >
  <br />
  <input type="button" value=" 1 " onclick="calculator.answer.value += '1'" />
  <input type="button" value=" 2 " onclick="calculator.answer.value += '2'" />
  <input type="button" value=" 3 " onclick="calculator.answer.value += '3'" />
  <input type="button" value=" + " onclick="calculator.answer.value += '+'" />
  <input type="button" value=" exp " onclick="calculator.answer.value = Math.exp(calculator.answer.value);" />
  <br />
  <input type="button" value=" 4 " onclick="calculator.answer.value += '4'" />
  <input type="button" value=" 5 " onclick="calculator.answer.value += '5'" />
  <input type="button" value=" 6 " onclick="calculator.answer.value += '6'" />
  <input type="button" value=" - " onclick="calculator.answer.value += '-'" />
  <input type="button" value=" ln "  onclick="calculator.answer.value = Math.log(calculator.answer.value);" /> 
  <br />
  <input type="button" value=" 7 " onclick="calculator.answer.value += '7'" />
  <input type="button" value=" 8 " onclick="calculator.answer.value += '8'" />
  <input type="button" value=" 9 " onclick="calculator.answer.value += '9'" />
  <input type="button" value=" &#215; " onclick="calculator.answer.value += '*'" />
  <input type="button" value=" &#8730; " onclick="sqrt(calculator.answer.value)" />
  <br />
  <input type="button" value=" C " onclick="calculator.answer.value = ''" />
  <input type="button" value=" 0 " onclick="calculator.answer.value += '0'" />
  <input type="button" value=" = " onclick="calculator.answer.value = eval(calculator.answer.value)" />
  <input type="button" value=" &#247; " onclick="div(calculator.answer.value)"/>
  <input type="button" value=" x&#178; " onclick="sqr(calculator.answer.value)" />
  <br />
  <input type="button" value=" cos " onclick="calculator.answer.value = Math.cos(calculator.answer.value);" /> 
  <input type="button" value=" sin " onclick="calculator.answer.value = Math.sin(calculator.answer.value);" />
  <input type="button" value=" tan " onclick="calculator.answer.value = Math.tan(calculator.answer.value);" />
  <input type="button" value=" . " onclick=" "; />
  <input type="button" value=" &larr; " onclick="backspace(calculator.answer.value);"; />
  <p align=right>&#8226; &#169;</p>
</form>

制作我的第一个计算器时遇到了问题。通过键盘输入的数字正在检查(不大于 10)，但通过按钮输入的数字不是...我的问题是什么？我做错了什么？也许这是我的 maxlength="10" 的问题？

<input type="text" maxlength="10" name="answer" id="t" onkeyup="checkLength(this); " placeholder="Enter data" > <br>

Answer 1

您正在检查 onkeyup 事件的长度，当您在框中键入时会触发该事件。因此，当您点击按钮时，它不是。

解决它的一种方法是改为在 onchange 事件上检查它。

---

更新:

此外，为了使该修复按预期工作，您应该手动触发 onchange 事件，因为更改 value 属性不会调度它。

JS:

calculator.answer.value += '0';
calculator.answer.onchange();

另一种更好的方法是:

JS:

if ("createEvent" in document) {
    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('change', false, true);
    calculator.answer.dispatchEvent(evt);
}
else
    calculator.answer.fireEvent('onchange');

随着处理程序变得越来越复杂，您可能更容易为按钮创建通用处理程序而不是内联命令。