Для <input type="number">
елемента, maxlength
не працює. Як я можу обмежити maxlength
елемент для цього числа?
Для <input type="number">
елемента, maxlength
не працює. Як я можу обмежити maxlength
елемент для цього числа?
Відповіді:
І ви можете додати max
атрибут, який визначатиме максимально можливе число, яке ви можете вставити
<input type="number" max="999" />
якщо ви додасте і а, max
і min
значення, ви можете вказати діапазон дозволених значень:
<input type="number" min="1" max="999" />
Вищезазначене все ще не зупинить користувача вручну вводити значення поза вказаним діапазоном. Натомість йому буде показано спливаюче вікно, яке вказує йому ввести значення в цьому діапазоні після подання форми, як показано на цьому скріншоті:
Ви можете вказати min
та max
атрибути, які дозволять вводити лише в певному діапазоні.
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
Однак це працює лише для кнопок управління прядильника. Хоча користувач може ввести число, більше дозволеного max
, форма не надсилатиметься.
Знімок екрана, знятий із Chrome 15
Ви можете використовувати oninput
події HTML5 в JavaScript, щоб обмежити кількість символів:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
maxlength
.............
Якщо ви шукаєте мобільне веб- рішення, в якому бажаєте, щоб ваш користувач бачив цифровий клавіатуру, а не повнотекстову клавіатуру. Використовуйте type = "tel". Він буде працювати з максимальною довжиною, що рятує вас від створення зайвих javascript.
Max і Min все одно дозволять користувачеві вводити числа, що перевищують max та min, що не є оптимальним.
Ви можете комбінувати все це так:
<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: Зверніть увагу, що якщо ввести більше десяткової крапки, це може зіпсуватися із числовим значенням.
це дуже просто, за допомогою javascript ви можете імітувати maxlength
, перевірити це:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
keydown
полягає в тому, що ви не можете використовувати зворотний простір для максимальних символів. Проблема keypress
полягає в тому, що ви можете скопіювати + вставити більше максимальних символів.
Або якщо ваше максимальне значення становить, наприклад, 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">
Потім (якщо ви хочете), ви можете перевірити, чи дійсно вводиться число
onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
Ви можете вказати його як текст, але додати pettern, що відповідає лише номерам:
<input type="text" pattern="\d*" maxlength="2">
Він працює ідеально, а також на мобільних (протестованих на iOS 8 та Android) вискакує цифрову клавіатуру.
pattern
Тільки викликає висунення на перший план перевірки.
//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", тоді під час розробки ви не отримаєте жодних обмежень користувача (таких тестуйте). І якщо у вас є вимога, яка не дозволяє користувачеві вводитись після певного обмеження, подивіться цей код і спробуйте один раз.
Інший варіант - просто додати слухача до будь-чого з атрибутом 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>
Максимальна довжина не буде працювати <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"
/>
Скажімо, ви хотіли, щоб максимальне дозволене значення було 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; }">
Як зазначають інші, min / max не є такою ж, як maxlength, оскільки люди все одно можуть ввести поплавок, який був би більшим за максимальну довжину рядка, яку ви задумали. Щоб по-справжньому наслідувати атрибут maxlength, ви можете зробити щось подібне в крайній частині (це еквівалентно maxlength = "16"):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
maxlength
не підтримується числовими вводами. У моєму прикладі value.slice(0,16)
не вдариться, якщо значення вводу не перевищує 16 символів.
type="number"
опікується цим :).
Відповідь Мейкоу Моури вдало почала. Однак його рішення означає, що при введенні другої цифри все редагування поля припиняється. Таким чином, ви не можете змінювати значення або видаляти будь-які символи.
Наступний код зупиняється на 2, але дозволяє продовжувати редагування;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
У мене була ця проблема раніше, і я вирішив її за допомогою комбінації типу номера 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
простий спосіб встановити максимальну довжину для введення чисел:
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
Як і у випадку type="number"
, ви вказуєте max
замість maxlength
властивості, яка є максимально можливою кількістю. Отже, з 4 цифр, max
має бути 9999
, 5 цифр99999
тощо.
Також якщо ви хочете переконатися, що це додатне число, ви можете встановити min="0"
, забезпечуючи додатні числа.
Тьфу. Це як би хтось відмовився наполовину через його реалізацію і думав, що ніхто цього не помітить.
З будь-якої причини у відповідях вище не використовуються атрибути 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 чорт".
Як я дізнався, ви не можете використовувати будь-якого з 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
запобігти неправильні ПРЕДСТАВЛЯЄ , як зазначено вище в кілька разів.
Я знаю, що вже є відповідь, але якщо ви хочете, щоб ваш вклад поводився точно так, як 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();
Це може комусь допомогти.
За допомогою трохи 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);
}
})
});