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

Question

我的问题是如何限制虚拟键盘的字符长度。我在 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");}
                       });

Answer 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 时仍能正常工作的键中。

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

Restrict virtual keyboard Input to input field maxLength JavaScript

javascript

string

virtual-keyboard