如何使输入字段最大长度从键盘工作？答案

【问题标题】：How to make an input field maxlength work from a keypad?如何使输入字段最大长度从键盘工作？
【发布时间】：2023-01-11 17:55:22
【问题描述】：

有一个最大长度为 6 的输入字段，当正常输入时它工作正常，但是当我尝试使用我制作的键盘时，它没有。它似乎绕过了限制，就好像它根本不存在一样。

HTML:

    <div class="bank-screen">
  <h1>Please enter your pin to continue</h1>
  <div class="options">
    <input name="pin" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "4"
    id="pinfield">
  </div>
  <div class="keypad">
    <div class="keys">   
    <button value="1" class="key" onclick="GetNum(this)">1</button>
    <button value="2" class="key" onclick="GetNum(this)">2</button>
    <button value="3" class="key" onclick="GetNum(this)">3</button>
    <button value="4" class="key" onclick="GetNum(this)">4</button>
    <button value="5" class="key" onclick="GetNum(this)">5</button>
    <button value="6" class="key" onclick="GetNum(this)">6</button>
    <button value="7" class="key" onclick="GetNum(this)">7</button>
    <button value="8" class="key" onclick="GetNum(this)">8</button>
    <button value="9" class="key" onclick="GetNum(this)">9</button>
    <button class="key"></button>
    <button value="0" class="key" onclick="GetNum(this)">0</button>
    <button class="key"></button>
    <button class="key" id="submit">Submit</button>
    <button class="key" id="cancel">Cancel</button>
    <button class="key" id="clear" onclick="clearall()">Clear</button>
  </div>
</div>

记者：

function GetNum(a){
var pinfield = document.getElementById("pinfield");
pinfield.value = pinfield.value + a.value;

}

function clearall(){
var pinfield = document.getElementById("pinfield");
pinfield.value = null;

}

var result = 103/50;
result = Math.floor(result);


console.log(result);

【问题讨论】：

您可能需要结合使用 keyup keydown 和 change 事件来检测长度并控制它...

标签： javascript html

【解决方案1】：

似乎通过 JavaScript 设置输入值将忽略长度限制。

在您的情况下，您可以在 GetNum 函数中添加一些验证，仅在当前值短于 4 个字符时才添加到输入字段。

function GetNum(a){
  var pinfield = document.getElementById("pinfield");
  if (pinfield.value.length < 6) {
    pinfield.value = pinfield.value + a.value;
  }
}

【讨论】：