Чи є спосіб запобігти отриманню значень типу "число"?


302

Я хочу отримати лише позитивні значення, чи є спосіб запобігти його використанню лише html.
Будь ласка, не пропонуйте метод перевірки

Знімок екрана управління входом


3
Ця нитка відповідає один і той же питання набагато краще ступеня: stackoverflow.com/questions/31575496 / ...
PiotrWolkowski

Відповіді:


658

Використовуйте такий minатрибут :

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


222
Це заблокує введення від'ємного числа за допомогою кнопок зі стрілками / спінера. Однак користувач все ще може вручну ввести негативну кількість і мати значення цього поля, прочитане як негативне число, обходячи таким чином атрибут min.
ecbrodie

52
@demaniak Ні. І як ця відповідь отримала стільки відгуків, коли вона наполовину відповідає на питання - це таємниця
GôTô

1
@Abraham Що робити, якщо дані завантажують у форму значення -ve, воно не позначає їх як червоне.
Каміні

2
Це не працює, користувач все одно може ввести негативне число вручну.
Альтеф чотири

129

Я не був задоволений відповіддю @Abhrabm, оскільки:

Це лише запобігало введенню негативних чисел зі стрілок вгору / вниз, тоді як користувач може вводити негативне число з клавіатури.

Рішення - запобігти с ключового коду :

// Select your input element.
var number = document.getElementById('number');

// Listen for input event on numInput.
number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}
<form action="" method="post">
  <input type="number" id="number" min="0" />
  <input type="submit" value="Click me!"/>
</form>

Роз'яснення, надане @Hugh Guiney :

Які ключові коди перевіряються:

  • 95, <106 відповідає цифрам 0 до 9;
  • 47, <58 відповідає числом від 0 до 9 у рядку чисел; і 8 - Backspace.

Таким чином, цей скрипт запобігає введенню недійсного ключа у вхід.


20
Оновлено, але я думаю, що це допоможе уточнити, які ключові коди перевіряються:> 95, <106 відповідає Numpad 0 до 9; > 47, <58 відповідає числом від 0 до 9 у рядку чисел; і 8 - Backspace. Таким чином, цей скрипт не дозволяє вводити будь-який ключ, крім тих. Це всебічно, але я думаю, що це може бути надмірним для браузерів, які в основному підтримують числові вводи, які вже фільтрують алфавітні ключі (за винятком символів типу "e", які можуть мати числове значення). Ймовірно, достатньо буде запобігти проти 189 (тире) і 109 (віднімання). А потім поєднуйте з min="0".
Х'ю Гвіней

1
@Manwal Він обмежує копіювання та вставлення номерів за допомогою клавіатури. І дозволяє мені скопіювати вставити негативні числа за допомогою миші.
Бенітон

1
@Beniton Дякуємо, що надаємо цей випадок використання. Чи можете ви дати мені мало уявлення про те, що ви робите. Завжди я можу вам допомогти. Будь ласка, надайте невеликий код або загадку для виконання. Ви можете мати форму перевірки рівня у своєму коді. Хоча у мене завжди є реєстрація в Backend, якщо я не дозволяю негативних цифр.
Manwal

1
Просто скопіюйте та вставте в поле в основному. Це насправді не окремий випадок чи щось. Замість того, щоб обробляти валідацію за допомогою ключа коду, можливо, краще зробити це onChange або focusOut і побудувати невелику функцію перевірки, щоб вловлювати будь-які від’ємні числа.
ulisesrmzroche

1
Також слід вказати умову для клавіші зі стрілкою (37, 38, 39, 41). || (e.keyCode>36 && e.keyCode<41)Це не дозволяє користувачеві збільшувати / зменшувати кількість за допомогою стрілки вгору / вниз та йти вправо / вліво, щоб редагувати номер.
vusan

86

Для мене рішення було:

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">

1
Дійсно найкраще рішення, коли ви користуєтеся візерунком і неформалізуйте з кутовим, оскільки модель не оновлюється, якщо не в межах діапазону. Мій випадок:<input ng-model="row.myValue" type="{{row.code == 1 ? 'text' : 'number'}}" min="0" ng-pattern="..." noformvalidate oninput="if (this.type=='text') this.value=Math.abs(this.value) ">
sebius

це найкраще працює, коли користувач знає, що значення за замовчуванням дорівнює 0. Інший мудрий користувач заплутається у зворотному просторі, натисніть, чому поле не очищає. Окрім цього, найкраще рішення. + 1
Глибока 3015,

1
ти врятував мій день
stackmalux

Цей працює найкраще, а у випадку використання десяткових також. Я використав іншу відповідь вище, вона припинила роботу, коли дозволити десяткові. Чи можемо ми відповісти цією відповіддю так, щоб люди в основному могли використовувати це.
Субхан Ахмед

31

Цей код добре працює для мене. Чи можете ви перевірити:

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

2
Це працює, але випорожнення всього вводу після спробу вводити -насправді не є хорошою ідеєю.
extempl

9
@extempl Звучить як справедливе покарання для користувача, який намагається ввести мінус у полі, де здоровий глузд свідчить про відсутність негативів.
Хофі

3
<input type="number" name="test" min="0" oninput="validity.valid||(value=value.replace(/\D+/g, ''))">- це видалить усі нецифрові символи
Олег Мельник

@Rexford Я згоден, але я налаштував min="0"так, щоб не було нагативів. Якщо ви хочете отримати негативне значення, видаліть цей атрибут.
Chinmay235

1
Я спробував це, але це також не дозволило ввести числа з десятковими крапками.
klent

21

Простий метод:

<input min='0' type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57">


Приємно і просто ... але все ж, негативні числа можна вставити.
Ральф

10

Я хотів дозволити десяткові числа та не очистити весь вхід, якщо введено мінус. Це добре працює принаймні в хромі:

<input type="number" min="0" onkeypress="return event.charCode != 45">

Як тут можна додати більше числа ascii. напр. з 45 я додаю також 46. Як це можна зробити?
Pradeep Singh

3
@PradeepSingh "return [45, 46] .indexOf (event.charCode) == -1"
гаразд, Reinstate Monica

Будь ласка, подумайте з коробки. Ви справді впевнені, що a keypress- це єдиний спосіб, коли можна ввести від'ємне число у вхід ...
Roko C.

6

Відповідь @Manwal хороша, але мені подобається код з меншим рядком коду для кращої читабельності. Крім того, я люблю використовувати onclick / onkeypress використання в HTML.

Моє запропоноване рішення робить те саме: Додати

min="0" onkeypress="return isNumberKey(event)"

на вхід html та

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

як функція javascript.

Як сказано, це робить те саме. Це лише особисті переваги щодо вирішення проблеми.


5

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

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

Це не замінює перевірку на стороні сервера!


Це добре працює, якщо користувач фокусується поза полем введення, однак якщо вони негайно натискають клавішу введення, поки все ще в полі; вони все ще можуть ввести від’ємне число.
NemyaNation

3

Ось кутове рішення 2:

створити клас OnlyNumber

import {Directive, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[OnlyNumber]'
})
export class OnlyNumber {

  // Allow decimal numbers. The \. is only allowed once to occur
  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];

  constructor(private el: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    // Do not use event.keycode this is deprecated.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    let current: string = this.el.nativeElement.value;
    // We need this because the current value on the DOM element
    // is not yet updated with the value from this event
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

додайте OnlyNumber до декларацій у app.module.ts і використовуйте його так, як будь-де у вашому додатку

<input OnlyNumber="true">

Чи є спосіб дозволити Paste для цього? Також я змінив регулярний вираз на: /^-? evidence0-9Sense+(\. evidence0-9 снимки*){0,1}$/g, щоб дозволити негативні числа, але це, здається, не працює?
Дейв Нотадж

2
oninput="this.value=(this.value   < Number(this.min) || this.value   > Number(this.max))  ? '' : this.value;"

2
Хоча цей фрагмент коду може вирішити питання, у тому числі пояснення дійсно допомагає покращити якість вашої публікації. Пам'ятайте, що ви відповідаєте на запитання читачів у майбутньому, і ці люди можуть не знати причини вашої пропозиції щодо коду.
Sudheesh Singanamalla

Хоча це може бути правильною відповіддю, у ньому бракує достатньо деталей. Поясніть, будь ласка, чому це працює. Використовуючи переповнення стека, врахуйте, що це жива база знань , відповіді, які не поділяють знання, набагато менш корисні.
Marc LaFleur

2

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

Вам потрібно лише підписатися на поле valueChanges та встановити значення як абсолютне значення (обережно, щоб не випускати нову подію, оскільки це призведе до іншого значення.

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'];
}

1

<input type="number" name="credit_days" pattern="[^\-]+" 
    #credit_days="ngModel" class="form-control" 
    placeholder="{{ 'Enter credit days' | translate }}" min="0" 
    [(ngModel)]="provider.credit_days"
    onkeypress="return (event.charCode == 8 || event.charCode == 0 || 
    event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 
    57" onpaste="return false">


1

Відповідь на це не корисна. оскільки він працює лише під час використання клавіш вгору / вниз, але якщо ви введете -11, це не працюватиме. Отже, ось невелике виправлення, яке я використовую

цей для цілих чисел

  $(".integer").live("keypress keyup", function (event) {
    //    console.log('int = '+$(this).val());
    $(this).val($(this).val().replace(/[^\d].+/, ""));
    if (event.which != 8 && (event.which < 48 || event.which > 57))
    {
        event.preventDefault();
    }
   });

цей, коли у вас є номери ціни

        $(".numeric, .price").live("keypress keyup", function (event) {
     //    console.log('numeric = '+$(this).val());
    $(this).val($(this).val().replace(/[^0-9\,\.]/g, ''));

    if (event.which != 8 && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }
   });

0

Це рішення дозволяє використовувати всі функції клавіатури, включаючи пасту для копіювання з клавіатури. Це запобігає вставленню негативних чисел за допомогою миші. Він працює з усіма браузерами та демонстрацією програмного кодексу використовує bootstrap та jQuery. Це має працювати з налаштуваннями та клавіатурами, які не є англійською мовою. Якщо веб-переглядач не підтримує захоплення події вставки (IE), він видалить негативний знак після фокусування. Це рішення поводиться так, як і власний браузер повинен мати min = 0 type = number.

Розмітка:

<form>
  <input class="form-control positive-numeric-only" id="id-blah1" min="0" name="nm1" type="number" value="0" />
  <input class="form-control positive-numeric-only" id="id-blah2" min="0" name="nm2" type="number" value="0" />
</form>

Javascript

$(document).ready(function() {
  $("input.positive-numeric-only").on("keydown", function(e) {
    var char = e.originalEvent.key.replace(/[^0-9^.^,]/, "");
    if (char.length == 0 && !(e.originalEvent.ctrlKey || e.originalEvent.metaKey)) {
      e.preventDefault();
    }
  });

  $("input.positive-numeric-only").bind("paste", function(e) {
    var numbers = e.originalEvent.clipboardData
      .getData("text")
      .replace(/[^0-9^.^,]/g, "");
    e.preventDefault();
    var the_val = parseFloat(numbers);
    if (the_val > 0) {
      $(this).val(the_val.toFixed(2));
    }
  });

  $("input.positive-numeric-only").focusout(function(e) {
    if (!isNaN(this.value) && this.value.length != 0) {
      this.value = Math.abs(parseFloat(this.value)).toFixed(2);
    } else {
      this.value = 0;
    }
  });
});

0

Ось рішення, яке найкраще працювало мені для поля QTY, яке дозволяє лише числа.

// Only allow numbers, backspace and left/right direction on QTY input
    if(!((e.keyCode > 95 && e.keyCode < 106) // numpad numbers
        || (e.keyCode > 47 && e.keyCode < 58) // numbers
        || [8, 9, 35, 36, 37, 39].indexOf(e.keyCode) >= 0 // backspace, tab, home, end, left arrow, right arrow
        || (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + A
        || (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + C
        || (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + X
        || (e.keyCode == 86 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + V
    )) {
        return false;
    }

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.