Как сделать тип = "число" только для положительных чисел

Ответ 1

Добавьте атрибут min

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

Ответ 2

Я нашел другое решение для предотвращения отрицательного числа.

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

Ответ 3

Это зависит от того, насколько вы точны. Это вы хотите принять только целые числа, чем:

<input type="number" min="1" step="1">

Ответ 4

Вы можете заставить ввод содержать только положительное целое число, добавив onkeypress внутри тега input.

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

Ответ 5

Try

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

Ответ 6

Вы можете использовать следующее, чтобы type="number" принимал только положительные числа:

input type="number" step="1" pattern="\d+"

Ответ 7

Я не могу найти идеальное решение, так как некоторые работы для ввода, но не для копирования и вставки, некоторые наоборот. Это решение работает для меня. Он защищает от отрицательного числа, набирает "e", копирует и вставляет текст "e".

создать функцию.

<script language="JavaScript">

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
</script>

добавить эти свойства для ввода. эти два препятствуют копированию и вставке нечислового текста, включая "е". чтобы они вступили в силу, вам нужно иметь их вместе.

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

Если вы используете Vue , вы можете найти ответ здесь. Я извлек его в миксин, который можно использовать повторно.

Ответ 8

добавьте этот код в свой тип ввода;

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

например:

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

Ответ 9

Другое решение состоит в том, чтобы использовать Js, чтобы сделать его положительным (опция min может быть отключена и недопустима, когда пользователь вводит что-то). Отрицательное, если в этом нет необходимости, также можно использовать событие on ('keydown')!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

Ответ 10

Это зависит от того, хотите ли вы int или float. Вот как бы они выглядели:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

К полю int прикреплена правильная проверка, так как его минимум равен 1. Однако, поле с плавающей запятой принимает 0; Чтобы справиться с этим, вы можете добавить еще один валидатор ограничений:

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddle здесь.

Обратите внимание, что ни одно из этих решений полностью не запрещает пользователю вводить неверный ввод, но вы можете вызвать checkValidity или reportValidity чтобы выяснить, набрал ли пользователь допустимый ввод.

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

Ответ 11

<input type="number" min="1" step="1">

Ответ 12

Попробуйте это. Отлично работает. Дополнительный код JavaScript не требуется.

onkeypress="return event.charCode

поместите это в свой тег ввода. как это.

<input type="number" min="0" max="" onkeypress="return event.charCode >= 48" class="form-control"  placeholder="Enter number(0-10)">

Спасибо.

Ответ 13

С типом ввода текста вы можете использовать это для лучшей проверки,

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

Ответ 14

Если требуется ввод текста, шаблон работает также

<input type="text" pattern="\d+">

Ответ 15

Попробуй это:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}