Ограничить ввод виртуальной клавиатуры полем ввода maxLength JavaScript - PullRequest
Новая
       33

Ограничить ввод виртуальной клавиатуры полем ввода maxLength JavaScript

0 голосов
/ 29 марта 2020

Моя проблема в том, как я могу ограничить длину символов на виртуальной клавиатуре. Я нашел виртуальную клавиатуру на 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");}
                       });

1 Ответ

0 голосов
/ 29 марта 2020

К сожалению, это неправильный подход к этому вопросу. Сначала давайте рассмотрим проблемы, которые вызовет ваш подход:

  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");
},

Далее вам нужно go через обработчик событий каждой кнопки и добавить к нему условное выражение. Я приведу здесь пример, все остальные вы можете сделать сами, так как он точно такой же. 

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;

Просто убедитесь, что вы не добавляете это к клавишам, которые вы все еще хотите функционировать в случае Максимальная длина достигнута.

...