Как сделать type = «number» только для положительных чисел

в настоящее время у меня есть следующий код

<input type="number" />

получается что-то вроде этого

Маленькие селекторы справа позволяют цифре переходить в минус. Как мне это предотвратить?

У меня есть сомнения по поводу использования type="number", оно вызывает больше проблем, чем решает, я все равно собираюсь проверить его, так что я должен просто вернуться к использованию type="text"?

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

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

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

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

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

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

Если вы хотите плавать, например, с двумя цифрами после десятичной точки:

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

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

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

Вот, event.charCode >= 48 гарантируется, что возвращаются только числа, большие или равные 0, а minтег гарантирует, что вы можете прийти к минимуму 1, прокручивая строку ввода.

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

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

Вы можете предотвратить отрицательный ввод в форме ввода чисел следующим образом:

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

Пытаться

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

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

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

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

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

<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, вы можете обратиться к этому ответу здесь . Я извлек его в миксин, который можно использовать повторно.

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

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" />

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

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

Это зависит от того, хотите ли вы 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 узнать, набрал ли пользователь допустимый ввод.

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

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

• Проверено в Angular 8
• значения положительные
• Этот код также обрабатывает nullи negitiveзначения.

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

Если вы попытаетесь ввести отрицательное число, событие onkeyup блокирует это, и если вы используете стрелку на входном номере, событие onblur разрешает эту часть.

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

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

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

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

Yii2 : Validation rule 

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