Як я можу обмежити можливі введення в елементі «номер» HTML5?


359

Для <input type="number">елемента, maxlengthне працює. Як я можу обмежити maxlengthелемент для цього числа?


5
Для людей, які шукають кращого рішення, це найкраще: stackoverflow.com/questions/9361193/…
Ünsal Korkmaz

4
атрибут max не працює в браузері Chrome на планшеті Android.
раніше

4
@ ÜnsalKorkmaz: це рішення має той недолік , що він не виводить цифрову клавіатуру на пристроях Android
Воля

Відповіді:


340

І ви можете додати maxатрибут, який визначатиме максимально можливе число, яке ви можете вставити

<input type="number" max="999" />

якщо ви додасте і а, maxі minзначення, ви можете вказати діапазон дозволених значень:

<input type="number" min="1" max="999" />

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

введіть тут опис зображення


4
Крістер, це спрацювало. Також, як сказав @Andy, я використовував функцію oninput, щоб нарізати додаткові номери. Довідка mathiasbynens.be/notes/oninput
Prasad

7
@Prasad - Якщо відповідь Енді правильна, виберіть її замість того, хто проголосував найбільше.
Моше

81
Це правильно, але слід зазначити, оскільки Енді стверджує, що це не обмежує введення більшого числа. Тож насправді це не еквівалент максимальної довжини в текстовому полі.
DA.

9
Якщо ви просто ввели поплавок більш високої точності, це порушиться. Напр. 3.1415926 обходить це, оскільки це менше 999 і більше 1.
0112,

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

115

Ви можете вказати minта maxатрибути, які дозволять вводити лише в певному діапазоні.

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

Однак це працює лише для кнопок управління прядильника. Хоча користувач може ввести число, більше дозволеного max, форма не надсилатиметься.

Повідомлення про перевірку Chrome для чисел, що перевищують макс
Знімок екрана, знятий із Chrome 15

Ви можете використовувати oninputподії HTML5 в JavaScript, щоб обмежити кількість символів:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

11
Один з можливих проблем із таким підходом JavaScript: він може не працювати, як очікувалося, якщо точка вставки не буде в кінці значення. Наприклад, якщо ви введете значення "1234" у поле введення, а потім перемістіть точку вставки назад до початку значення та введіть "5", ви отримаєте значення "5123". Це відрізняється від поля типу type = "text" з максимальною довжиною 4, де браузер не дозволить вам ввести п'ятий символ у поле "full", а значення залишиться "1234".
Джон Шнайдер

@Andy, Очевидно, що питання шукає не-JS спосіб зробити maxlength.............
Pacerier

4
@Pacerier: чи щось у моїй відповіді означало, що я подумав інакше? Як бачите, я запропонував найближче можливе рішення, яке можна досягти, використовуючи лише HTML, а також додаткову пропозицію, що використовує JavaScript там, де ОП могла б хотіти, щоб користувач не вводив більше символів, ніж дозволено.
Енді Е

84

Якщо ви шукаєте мобільне веб- рішення, в якому бажаєте, щоб ваш користувач бачив цифровий клавіатуру, а не повнотекстову клавіатуру. Використовуйте type = "tel". Він буде працювати з максимальною довжиною, що рятує вас від створення зайвих javascript.

Max і Min все одно дозволять користувачеві вводити числа, що перевищують max та min, що не є оптимальним.


3
Чудова знахідка, це спрацювало як шарм, великі пальці за те, що не потрібно створювати додатковий javascript.
Дієго

9
Я виявив, що це не найкраще рішення для цифрового введення, оскільки "тел" введення дозволяє отримати додаткові символи, і він відображає літери біля кожного числа. Чисто цифрова клавіатура виглядає набагато чистіше.
hawkharris

@hawkharris Ви неправі, тип = "число" - це чистіший інтерфейс користувача. Простіше випадково набрати поганий чар. Тому потрібна додаткова перевірка, щоб користувач не вводив погані дані. Але також врахуйте, що користувач міг так само легко вводити всі десяткові крапки, а також цифрову клавіатуру. Крім того, це не вирішує питання вище без додаткового JavaScript.
Дуейн

1
Дякую, я працюю над мобільним додатком іонних рамок, і це вирішило мою проблему
Ахмед

1
якщо використовується з pattern = "[0-9] *" додаткові символи будуть відключені
apereira

71

Ви можете комбінувати все це так:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>


Оновлення:
Ви також можете попередити введення будь-яких нечислових символів, оскільки object.lengthце буде порожній рядок для введення чисел, а отже, його довжина буде 0. Таким чином, maxLengthCheckфункція не буде працювати.

Рішення:
див. Це чи це для прикладів.

Демо - Повну версію коду див. Тут:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Оновлення 2: Ось код оновлення: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Оновлення 3: Зверніть увагу, що якщо ввести більше десяткової крапки, це може зіпсуватися із числовим значенням.


Це хороше рішення, але я вважаю, що object.value.length повертає 0, якщо є будь-які нечислові значення.
Андрій

1
@AndrewSpear Це тому, що object.value буде порожнім рядком, якщо ви вводите нечислові значення у введеннях з типом "число". Дивіться документацію. Також, будь ласка, прочитайте моє оновлення, щоб вирішити цю проблему.
Девід Рефуа

Це все одно порушується, якщо ви введете більше однієї десяткової крапки, наприклад 111..1111. Не використовуйте цей код для безпеки, оскільки зловмисний код все ще може передаватися.
PieBie

@PieBie Чувак, цей код уже три роки тому. Використовуйте замість jQuery.
Девід Рефуа

1
так, я це знаю, але початківці можуть все-таки просто скопіювати його і вставити.
PieBie

26

це дуже просто, за допомогою javascript ви можете імітувати maxlength, перевірити це:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

12
За допомогою свого рішення ви не можете використовувати зворотний простір, як тільки ви досягнете 2 символів. але мені не вистачає дещо для функціонального рішення
Крістоф Дев

12
Замість onKeyDownyou слід використовувати onKeyPress.
Рупеш Арора

1
не вийде, якщо виділити текст і натиснути символ (тобто замінити вміст вводу)
Arijoon

підтвердити це, якщо це не з наступних ключів stackoverflow.com/a/2353562/1534925
Akshay

3
Проблема keydownполягає в тому, що ви не можете використовувати зворотний простір для максимальних символів. Проблема keypressполягає в тому, що ви можете скопіювати + вставити більше максимальних символів.
Ставм

23

Або якщо ваше максимальне значення становить, наприклад, 99 та мінімальне 0, ви можете додати це до елемента введення (ваше значення буде переписане вашим максимальним значенням тощо)

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

Потім (якщо ви хочете), ви можете перевірити, чи дійсно вводиться число


... Чудово, але вам більше не потрібні мінімум і макс. (просто кажу)
xoxel

2
@xoxel ви робите, якщо хочете, щоб попереджувальне повідомлення все ще відображалося
DNKROZ

Це дійсно добре ... Спасибі
Вінсі Ооммен

заради узагальнення я б зробивonKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
oriadam

18

Ви можете вказати його як текст, але додати pettern, що відповідає лише номерам:

<input type="text" pattern="\d*" maxlength="2">

Він працює ідеально, а також на мобільних (протестованих на iOS 8 та Android) вискакує цифрову клавіатуру.


Атрибут шаблон не підтримуються в IE9 і більш ранніх версіях, і вона має часткову підтримку в Safari: caniuse.com/#feat=input-pattern
diazdeteran

Так, дякую за вказівку, але ми відмовилися від підтримки IE9 (вирізання гірчиці з неї), і я віддаю перевагу цьому методам JS. Залежить від проекту.
Кріс Панайотофф

2
Користувач не заважає вводити це нечислові символи. Вони можуть ввести 2 будь-яких знаків. patternТільки викликає висунення на перший план перевірки.
brt

перевірена на Android 9 (Nokia 8), але я отримую звичайну клавіатуру: (будь-які ідеї?
oriadam

14

//For Angular I have attached following snippet.
<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

Якщо ви використовуєте подію "onkeypress", тоді під час розробки ви не отримаєте жодних обмежень користувача (таких тестуйте). І якщо у вас є вимога, яка не дозволяє користувачеві вводитись після певного обмеження, подивіться цей код і спробуйте один раз.


1
Проблеми, які я бачу тут, полягають у тому, що: 1. замінити на вибір тексту та вводити текст не працює, якщо вхід досягає 7 чисел 2. збільшуючи вхід на 1, коли натискання "boarder" переповнення спрацьовує -> 9999999 і натискаємо вгору кнопка.
Порушує

Я спробував з простою версією JavaScript. Якщо ви хочете, ви можете побачити за допомогою фрагмента Run code. Як такий, я не знайшов жодних обмежень.
Prasad Shinde

1
Не знайшли жодних обмежень. Він зупиняється на 7 цифрах. Я використовую це рішення для свого коду.
Клаудіо

Існує обмеження. Коли ви досягнете межі, виберіть усі та хочете замінити їх, але це не спрацює. Заміна працює для мене лише тоді, коли я перезаписую значення курсовим, перш ніж повернути помилкове.
Insomnia88

@ Insomnia88, @ edub, що якщо ми запишемо функцію та перевіримо необхідні умови ...
Prasad

12

Інший варіант - просто додати слухача до будь-чого з атрибутом maxlength і додати до нього значення зрізу. Якщо припустити, що користувач не хоче використовувати функцію всередині події, пов'язаної з введенням даних. Ось фрагмент коду. Ігноруйте CSS та HTML-код, що важливо для JavaScript.

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>


10

Максимальна довжина не буде працювати <input type="number"найкращим чином, як я знаю, це використовувати oninputподію для обмеження максимальної довжини . Будь ласка, дивіться нижче код для простої реалізації.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

Працював як шарм!
SiboVG

9

Скажімо, ви хотіли, щоб максимальне дозволене значення було 1000 - або набраним, або за допомогою спінера.

Ви обмежуєте значення спінера за допомогою: type="number" min="0" max="1000"

і обмежте те, що вводиться клавіатурою з javascript: onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

8

Як зазначають інші, min / max не є такою ж, як maxlength, оскільки люди все одно можуть ввести поплавок, який був би більшим за максимальну довжину рядка, яку ви задумали. Щоб по-справжньому наслідувати атрибут maxlength, ви можете зробити щось подібне в крайній частині (це еквівалентно maxlength = "16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

фрагмент буде видаляти символи без відома кінцевого користувача, коли вставляється між ними. тоді як максимальна довжина блокується.
Pradeep Kumar Prabaharan

@PradeepKumarPrabaharan maxlengthне підтримується числовими вводами. У моєму прикладі value.slice(0,16)не вдариться, якщо значення вводу не перевищує 16 символів.
30

так, максимальна довжина не підтримується для введення чисел .. цей код є gud, але цей код точно не відповідає властивості
maxlength

@TobiasGaertner type="number"опікується цим :).
thoan

@ 10basetom ... залежно від браузера ... наприклад, у FF ви все одно можете вводити символи, і вони не зупиняться після обмеження - але пов'язане з уявленням про номер типу це прийнятне рішення.
Тобіас Гертнер

6

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

Наступний код зупиняється на 2, але дозволяє продовжувати редагування;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

2
Ні. Спробуйте вставити значення.
Qwertiy

6

У мене була ця проблема раніше, і я вирішив її за допомогою комбінації типу номера html5 та jQuery.

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

сценарій:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

Я не знаю, чи події трохи непосильні, але це вирішило мою проблему. JSfiddle


Ви можете легко вставити символи.
Джессіка

4

Введення HTML

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

4

простий спосіб встановити максимальну довжину для введення чисел:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

не працює на андроїд хрому. У onkeypress є деякі проблеми з цим.
Аакаш Тхакур

3

Як і у випадку type="number", ви вказуєте maxзамість maxlengthвластивості, яка є максимально можливою кількістю. Отже, з 4 цифр, maxмає бути 9999, 5 цифр99999 тощо.

Також якщо ви хочете переконатися, що це додатне число, ви можете встановити min="0", забезпечуючи додатні числа.


3

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

З будь-якої причини у відповідях вище не використовуються атрибути minта max. Цей jQuery закінчує його:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

Можливо, це також буде працювати як названа функція "oninput" без jQuery, якщо ваш один із цих типів "jQuery-is-the-the чорт".


він не відповідає правильно на питання, але проголосував так, як вирішив мою проблему :)
TrOnNe

2

Як я дізнався, ви не можете використовувати будь-якого з onkeydown, onkeypressабо onkeyupподій для повного вирішення , включаючи мобільні браузери. До речі onkeypress, застарілий і більше не присутній у хромі / опері для андроїда (див .: Робочий проект проекту W3C події UI, 04 серпня 2016 ).

Я вирішив рішення, використовуючи лише oninputподію. Можливо, вам доведеться провести додаткову перевірку чисел за необхідністю, наприклад, негативний / позитивний знак або десятковий і тисячний роздільники тощо, але для початку повинно вистачити наступного:

function checkMaxLength(event) {
	// Prepare to restore the previous value.
	if (this.oldValue === undefined) {
		this.oldValue = this.defaultValue;
	}

	if (this.value.length > this.maxLength) {
		// Set back to the previous value.
		this.value = oldVal;
	}
	else {
		// Store the previous value.
		this.oldValue = this.value;
		
		// Make additional checks for +/- or ./, etc.
		// Also consider to combine 'maxlength'
		// with 'min' and 'max' to prevent wrong submits.
	}
}

Я також рекомендував би поєднувати maxlengthз minі maxзапобігти неправильні ПРЕДСТАВЛЯЄ , як зазначено вище в кілька разів.


2
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

або якщо ви хочете мати можливість нічого не вводити

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

1

Ви можете спробувати це також для чисельного введення з обмеженням довжини

<input type="tel" maxlength="3" />

@tiltdown Вибачте за введення тексту. Виправлено відповідь.
shinobi

1

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

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

@Phill_t, може, ти можеш мене просвітити? Я використав ваш код, і він працює добре в принципі, але "$ (this) .attr (" maxlength ")" завжди доставляє 2. І чому краще було б використовувати "$ (this) .attr (" maxlength ")" якщо він працював замість просто "this.maxlength", який я тестував і працював так, як очікувалося, і він коротший і незрозуміліше читати? Я щось пропустив?
markus s

Що ви маєте на увазі "доставляє 2"?
Philll_t

Вибачте мої вибачення. "this.maxLength" працює лише в області функцій клавіші. У функції "addMax" "цей" є документом, а не очікуваним елементом і тому має різні значення атрибутів. Як я можу отримати доступ замість введення номера? Чи справді описаний вище код працює на вашій стороні? Я тестував Chrome / Opera / Vivaldi, Firefox, Edge, IE та Safari і мав однакові результати для кожного браузера. Гаразд, в Edge maxlegth = "1" і maxlength = "2", де дійсно працює, але "$ (це) .attr (" maxlength ")" не збільшується далі для будь-якого більшого числа !!? @anybody: Будь-які пропозиції?
markus s

Як я вже говорив, це завжди два, тому що це викликано на документі, а не на розглянутому елементі, як я з'ясував, коли налагоджував його. До речі, ви також можете подивитися на моє рішення, яке я зрозумів, вивчивши ваше: stackoverflow.com/a/41871960/1312012
markus s


0

Це може комусь допомогти.

За допомогою трохи javascript ви можете шукати всі введення даних для локальної дати, шукати, якщо рік, який користувач намагається ввести, більший, ніж 100 років у майбутньому:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.