限制虚拟键盘输入到输入字段 maxLength JavaScript答案

【问题标题】：Restrict virtual keyboard Input to input field maxLength JavaScript限制虚拟键盘输入到输入字段 maxLength JavaScript
【发布时间】：2020-03-29 09:34:52
【问题描述】：

我的问题是如何限制虚拟键盘的字符长度。我在 codepen https://codepen.io/dcode-software/pen/KYYKxP 上找到了虚拟键盘，我想将输入字符限制为输入字段 maxLength。有人可以帮忙吗？这是我的方法，希望输入后最后一个字符不改变。请帮助...我是编码新手...

 keyElement.addEventListener("click", () => {
                           var element = document.querySelectorAll(".use-keyboard-input");
                           element.maxLength = 10;
                       if(this.properties.value.length  === element.maxLength){
                           this.properties.value = this.properties.value.substring(0, this.properties.value.length-1 );
                           this._triggerEvent("oninput");}
                       });

【问题讨论】：

标签： javascript string virtual-keyboard

【解决方案1】：

很遗憾，这是解决此问题的错误方法。首先让我们看看您的方法会导致的问题：

keyElement.addEventListener("click", () => {
这将在每个按键点击事件上触发。您不希望这样，因为如果达到 maxLength，您仍然希望退格键起作用。
if(this.properties.value.length === element.maxLength){
仅当输入字段的值与 maxLength 属性的长度完全相同时才会触发。如果用户以某种方式绕过它，它将不再有任何效果。更好的解决方案是使用>= 而不是===。
this.properties.value = this.properties.value.substring(0, this.properties.value.length-1 );
这是你的实际问题。它将替换最后一个字符值。相反，您应该简单地return false;

现在让我们看看如何让它正常工作：

首先，您需要为您提供 maxLength 属性。为此，您需要更改以下内容。

properties: {
    value: "",
    capsLock: false, // Add a comma here
    maxLength: 0 // Add this line
},

document.querySelectorAll(".use-keyboard-input").forEach(element => {
    element.addEventListener("focus", () => {
        this.open(element.value, element.maxLength, currentValue => { // Pass element.maxLength as a parameter
            element.value = currentValue;
        });
    });
});

open(initialValue, maxlength, oninput, onclose) { // Add maxlength parameter
    this.properties.value = initialValue || "";
    this.properties.maxLength = maxlength; // Set the property value
    this.eventHandlers.oninput = oninput;
    this.eventHandlers.onclose = onclose;
    this.elements.main.classList.remove("keyboard--hidden");
},

接下来，您需要检查每个按钮的事件处理程序并为其添加条件。我这里给你举个例子，其他的你自己做，都是一样的。

case "enter":
    keyElement.classList.add("keyboard__key--wide");
    keyElement.innerHTML = createIconHTML("keyboard_return");

    keyElement.addEventListener("click", () => {

        // Check if the length of the value is equal or bigger than maxLength
        if(this.properties.value.length >= this.properties.maxLength){
            // Return false so it doesn't do anything
            return false;
        }
        this.properties.value += "\n";
        this._triggerEvent("oninput");
    });

    break;

请确保不要将其添加到在达到 maxLength 时仍希望使用的键中。

【讨论】：

感谢您的回答和您的时间。这正是我所需要的:)