Блог

Я установил тип ввода «число» и теперь хочу применить к нему некоторые проверки. Я хочу запретить запуск функции (после нажатия кнопки), если ввод содержит» «, » — » или «e».

 const countBtn = document.getElementById("forge-points-btn");

function quantityHandler() {
    let userInput = document.querySelector(".forge-points-input").value;
    if(userInput.split("").includes("e") || userInput.split("").includes("-")) {
        return;
    }
    // else code
    } 

     <input type="number" class="forge-points-input" id="forge-points-input"></input>
    <button type="button" id="forge-points-btn">Count</button> 

Но, к моему удивлению, это не работает, потому что при вводе минус, плюс или «e», например «321-51″, » e -» и т. Д., Это userInput равно пустой строке. Однако при вводе «-55» userInput отображается правильное значение. Почему это происходит? Я пытаюсь понять, почему это решение не может сработать. Я видел другие решения на этом форуме, но все же хотел бы понять, почему это не может сработать.

В документации MDN говорится:

<input type="number"> элементы автоматически делают недействительной любую запись, которая не является числом (или пустой, если required не указано иное).

Вы можете убедиться в этом сами: предоставление значения, которое не является числом, автоматически делает поле недействительным.

 <p>Equations are not numbers.</p>
<input type="text" id="text-input" value="123-456">
<input type="number" id="number-input" value="123-456">

<p>Signed numbers are numbers.</p>
<input type="number" id="number-input" value="-123">
<input type="number" id="number-input" value=" 123">

<p>Exponents are numbers.</p>
<input type="number" id="exponent-input" value="10e5"> 

Если вы хотите запретить , - , и e в вашем input[type=number] случае ваш подход верен. Однако вы также должны убедиться, что входные данные действительны.

 if (!userInput?.length || userInput.includes("e") || ...)
 

(Обратите внимание, вам это не нужно .split("") , так как JavaScript может принудить a number перейти в a string .)