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');

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

Answer 2

您说要检查键盘输入的值，但是用按钮输入的值不是。问题是你将函数绑定到事件onkeyup，只有在按下键并且在输入内部释放后才会发生，你应该将你的函数绑定到事件onchange

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

2 个答案: