Как запретить пользователю вводить отрицательные значения в Html-ввод

Я использую следующий элемент ввода html для сбора количества продукта на странице Html, но пользователь все равно может продолжать и вводить отрицательное значение вручную. Например: я выбрал текстовое поле и ввел -100, а поле ввода приняло его, не жалуясь на него.Как запретить пользователю вводить отрицательные значения в Html-ввод

Как я могу запретить пользователю вводить 0 и неотрицательные значения в элемент ввода Html?

<input type="number" id="qty" value="" size="3" min="1" />

источник

2015-03-09 user2325154

Проверить его и предложит пользователю или отобразить ошибка. Есть много способов сделать это – Huangism

Есть ли какие-нибудь новые функции в Html5, которые на самом деле это делают? – user2325154

у вас есть правильный html5, и он должен предотвращать отрицательные значения или ноль ... к сожалению, не все браузеры поддерживают его http://caniuse.com/#search=number –

Благодаря <input type="number"> все еще широко не хорошо поддерживается, вы все еще лучше использовать режим ввода текста. В превентивном порядке вы можете запретить любые символы, которые не являются номерами с событием keypress и e.preventDefault(). Однако убедитесь, что если вы хотите поддерживать устаревшие браузеры (IE8-), есть number of inconsistencies, чтобы принимать во внимание относительно возвращенных кодов клавиш/кодов. Если вы хотите запретить содержание склеивание без номера, вы можете сделать это с paste событием и e.clipboardData.getData('plain/text') (для полной реализации см here)

Тест на код ниже:

var myInput = document.getElementsByTagName('input')[0]; 
 
myInput.addEventListener('keypress', function(e) { 
 
    var key = !isNaN(e.charCode) ? e.charCode : e.keyCode; 
 
    function keyAllowed() { 
 
    var keys = [8,9,13,16,17,18,19,20,27,46,48,49,50, 
 
       51,52,53,54,55,56,57,91,92,93]; 
 
    if (key && keys.indexOf(key) === -1) 
 
     return false; 
 
    else 
 
     return true; 
 
    } 
 
    if (!keyAllowed()) 
 
    e.preventDefault(); 
 
}, false); 
 

 
// EDIT: Disallow pasting non-number content 
 
myInput.addEventListener('paste', function(e) { 
 
    var pasteData = e.clipboardData.getData('text/plain'); 
 
    if (pasteData.match(/[^0-9]/)) 
 
    e.preventDefault(); 
 
}, false);

<input type="text">

источник

2015-03-09 22:52:50 Tyblitz

Не забудьте проверить onblur при вставке данных – Mouser

@Mouser спасибо за указание, я забыл протестировать что. Однако, поскольку я собирался использовать «превентивный» подход, я пошел с событием 'paste', чтобы перехватить контент до его вывода. – Tyblitz

Вы можете проверить значение с регулярным выражением с атрибутом pattern:

<input type="number" pattern="^[1-9]\d*$" name="qty">

источник

2015-03-09 21:53:18 pstenstrm

попробовать это:

<input type="number" min="0">

источник

2017-12-04 19:21:53 Srini

Как запретить пользователю вводить отрицательные значения в Html-ввод

ответ

Смежные вопросы