На keyup не удовлетворяет условию

<label> Telugu</label>         
    <input type="text" onkeyup="return isNumber(event)" name="telugu"  id="telugu" maxlength="3"/> <br> <br>


JS 

<!DOCTYPE html>
<html>
<head>
<script>
function isNumber(event){
    var k= event.keyCode;
    console.log(k);
    if((k>47 && k<58))   /// THIS IS NOT WORKING
{
        console.log("entered");
        var s1 = document.getElementById("telugu").value;
        var s2= document.getElementById("hindi").value;
        var s3= document.getElementById("english").value;
        var s4= document.getElementById("maths").value;
        var s5= document.getElementById("science").value;
        if(s1<0 || s1>100){
            console.log("tel")
            document.getElementById("telugu").value = 0;      
        }

Я хочу вводить только числа в текстовое поле. условие не работает. Если значение в текстовом поле меньше 0 или больше 100, то я сбрасываю значение на 0. Сброс работает, но символы также вводятся.


javascript html onkeyup
person Divya Godavarti    schedule 16.09.2020    source источник
comment
Если вам нужны только цифры в текстовом поле, почему бы вам просто не использовать <input type=number?   -  person Sai Datta    schedule 16.09.2020
comment
@SaiDatta Я хочу использовать текстовое поле, чтобы дизайн формы был хорошим. Использование числа. В числовом поле отображаются стрелки вниз и вверх   -  person Divya Godavarti    schedule 16.09.2020
comment
@DivyaGodavarti, если это единственная проблема, вы можете отключить ее. Просто установите для параметра внешний вид значение none.   -  person Cristian Traìna    schedule 16.09.2020
comment
@DivyaGodavarti у вас есть ошибка, если условие if((k>47 && k<58)) должно быть if(k>47 && k<58)   -  person CodeBug    schedule 16.09.2020
comment
В предоставленном вами коде отсутствуют две закрывающие скобки. Пожалуйста, добавьте }} в конце вашего кода.   -  person Rickard Elimää    schedule 16.09.2020
comment
@CristianTraìna Я просто хотел использовать функцию javascript.   -  person Divya Godavarti    schedule 16.09.2020
comment
@CodeBug Оба одинаковы   -  person Divya Godavarti    schedule 16.09.2020
comment
@RickardElimää Я просто забыл закрыть здесь. Но на самом деле с синтаксисом все в порядке. Проблема с keyup, так как это не проверка условия. Я пробовал с нажатием клавиши, он проверяет, но также разрешает 101   -  person Divya Godavarti    schedule 16.09.2020

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете использовать regex для удаления всего, что не цифра. Я также перешел на событие input, которое срабатывает всякий раз, когда вход меняется.

Если вы хотите принудительно ввести числа, вы также можете просто установить тип type="number". Преимущество этого заключается в том, что он автоматически отображает цифровую клавиатуру на телефонах и планшетах, хотя вы также можете показать это с помощью inputmode="numeric" атрибут

// Get the textbox
const telugu = document.getElementById("telugu");

// Add event that fires whenever the input changes
telugu.addEventListener("input", () => {
    // Replace everything that is not a digit with nothing
  const stripped = telugu.value.replace(/[^\d]/g, "");
  
  // If the value is below 0 or above 100 set it to 0, else enter the stripped value
  stripped < 0 || stripped > 100
    ? telugu.value = 0
    : telugu.value = stripped;
});
<label for="telugu">Telugu</label>
<input type="text" name="telugu" id="telugu" maxlength="3"/>

Без комментариев:

const telugu = document.getElementById("telugu");

telugu.addEventListener("input", () => {
  const stripped = telugu.value.replace(/[^\d]/g, "");
  
  stripped < 0 || stripped > 100
    ? telugu.value = 0
    : telugu.value = stripped;
});
<label for="telugu">Telugu</label>
<input type="text" name="telugu" id="telugu" maxlength="3"/>

Упрощенный:

function validateValue(event) {
  var input = event.target;
  var stripped = input.value.replace(/[^0-9]/g, ""); /* Everthing that is not (^) in the range of 0 through 9 */
  
  if(stripped < 0 || stripped > 100) {
    input.value = 0;
  } else {
    input.value = stripped;
  }
}
<label for="telugu">Telugu</label>
<input type="text" oninput="validateValue(event)" name="telugu" id="telugu" maxlength="3"/>

person Reyno    schedule 16.09.2020
comment
Спасибо. Это работает, но не могли бы вы упростить код в javascript, так как я новичок, пожалуйста - person Divya Godavarti; 16.09.2020
comment
@DivyaGodavarti последний фрагмент представляет собой упрощенную версию, он больше похож на ваш код. Хотя довольно сложно упростить что-то вроде regex. - person Reyno; 16.09.2020

arrow_upward
1
arrow_downward

Вы должны сделать переменную s1, проанализировав целое число с помощью функции parseInt().

function isNumber(event){
    var k = event.keyCode;
    console.log(k);
    if(k>47 && k<58){
        console.log("entered");
        var s1 = parseInt(document.getElementById("telugu").value);
        console.log('s1', s1);
        if(s1<0 || s1>100){
            console.log("tel")
            document.getElementById("telugu").value = 0;      
        }
  }else{
    document.getElementById("telugu").value = null;
  }
}
<label> Telugu</label>         
<input type="text" onkeyup="return isNumber(event)" name="telugu"  id="telugu" maxlength="3"/>

person Fatih Mert Doğancan    schedule 16.09.2020

arrow_upward
0
arrow_downward

Есть разные пути к этому.

input: срабатывает, когда значение входа изменилось.

change: срабатывает, когда значение ввода изменилось и элемент теряет фокус (он больше не выбран).

blur: срабатывает, когда ввод теряет фокус.

Какое событие вы используете, зависит от того, когда вы хотите проверить ввод. Используйте input, если хотите проверить сразу после изменения значения. В противном случае используйте blur или change.

Пример:

let input = document.querySelector('#telegu');
input.addEventListener('input', () => {
    // Your check
});
input.addEventListener('change', () => {
    // Your check
});
input.addEventListener('blur', () => {
    // Your check
});
person michaelT    schedule 16.09.2020