Предотвращать отрицательные входы типа ввода типа = "число"?

Я хочу ограничить ввод пользователем положительных чисел в форме html.

Я знаю, что вы можете установить min = "0", однако можно обойти это, вручную введя отрицательное число.

Есть ли другой способ решить эту проблему без написания функции проверки?

ОТВЕТЫ

Ответ 1

Это использует Javascript, но вам не нужно писать свою собственную процедуру проверки. Вместо этого просто проверьте свойство validity.valid. Это будет верно тогда и только тогда, когда вход попадает в диапазон.

<html>
<body>
<form action="#">
  <input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

Ответ 2

Это невозможно без проверки значения ввода.

тип ввода = номер

Элемент ввода с атрибутом type, значение которого является "числом", представляет собой точный элемент управления для установки значения элементов в строку , представляющую число.

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

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

Один из способов сделать это с помощью JavaScript может выглядеть так.

// Select your input element.
var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function(){
    // Let match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
}, false)
<input type="number" min="0" />

Ответ 3

Если вы хотите обеспечить значение по умолчанию, то есть минимальное значение или любое другое значение, это рабочее решение. Это также предотвращает очистку поля ввода. Точно так же вы можете установить максимальное значение.

<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value   < 1) ? (1/1) : this.value;">

Ответ 4

Следующий script разрешит ввод чисел или обратное пространство во вход.

var number = document.getElementById('number');

number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}
<input type="number" id="number" min="0">

Ответ 5

type="number" уже решает разрешить номера только для ввода, как здесь указывают другие ответы.

Только для справки: с jQuery вы можете перезаписать отрицательные значения для фокуса следующим кодом:

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

Это не заменяет проверку на стороне сервера!

Ответ 6

Просто добавьте еще один способ сделать это (используя Angular), если вы не хотите портить HTML еще большим количеством кода:

Вам нужно только подписаться на поле valueChanges и установить значение в качестве абсолютного значения (заботясь о том, чтобы не генерировать новое событие, потому что это вызовет другое значение valueChange, а следовательно, рекурсивный вызов и вызовет ошибку превышения максимального размера вызова)

HTML-код

<form [formGroup]="myForm">
    <input type="number" formControlName="myInput"/>
</form>

TypeScript CODE (внутри вашего компонента)

formGroup: FormGroup;

ngOnInit() { 
    this.myInput.valueChanges 
    .subscribe(() => {
        this.myInput.setValue(Math.abs(this.myInput.value), {emitEvent: false});
    });
}

get myInput(): AbstractControl {
    return this.myForm.controls['myInput'];
}