将虚拟键盘输入限制为输入字段maxLength JavaScript

Question

我的问题是如何限制虚拟键盘中字符的长度。我在代码笔https://codepen.io/dcode-software/pen/KYYKxP上找到了虚拟键盘，我想将输入字符限制为inputfield 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");}
                       });

Answer 1

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

1. keyElement.addEventListener("click", () => {这将在每个按键单击事件上触发。您不希望那样，因为如果达到maxLength，您仍然希望退格键可以工作。
2. if(this.properties.value.length === element.maxLength){仅当输入字段的值与maxLength属性的长度完全相同时才触发。如果用户以某种方式绕过它，它将不再起作用。更好的解决方案是使用>=而不是===。
3. 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的情况下使用的键即可。