Як зробити тип = "число" лише до додатних чисел

На даний момент у мене є наступний код

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

додайте ці властивості до вхідних даних. ці два файли запобігають копіюванню та вставці не номерного тексту, включаючи "e". щоб мати силу, потрібно мати обох разом.

<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 може бути відключена і недійсна, коли користувач набирає smth) Негативний, якщо не потрібен, також може бути використаний подія ('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 має додане до нього правильне підтвердження, оскільки його min дорівнює 1. Поле float приймає 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 з’ясувати, чи ввів він дійсний ввід.

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

Спробуйте це:

• Випробуваний у куті 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' => '>'],
        ];
}