Если я использую поле ввода типа = "число" с шагом = "100".
Я не хочу, чтобы нечетные числа были недопустимыми.
Я просто хочу увеличить или уменьшить значение со значением 1000.
<input type="number" min="100" max="999999" step="100" />
Если пользователь вводит значение "199" и отправляет его, он получает ошибку, потому что значение не делится на 100.
Но все, что я хочу с помощью шага, - это управление поведением счетчика, например. если пользователь щелкнет, я хочу, чтобы значение 199 становилось 200, и если он/она щелкнет вниз, я хочу, чтобы он стал 100. Или в идеале я хотел бы, чтобы значение было увеличено или уменьшено со значением 100.
Как мне это сделать?
Я попытался использовать недопустимое событие (с jQuery 1.7.2) следующим образом:
$( "[type='number']" ).bind( 'invalid', function( e ) {
var el = $( this ),
val = el.val( ),
min = el.attr( 'min' ),
max = el.attr( 'max' );
if ( val >= min && val <= max ) {
return false;
}
} );
Но это приводит к тому, что форма не отправляется.
PS: Это в Google Chrome 20.0.1132.57 на Fedora 16.
Ответ 1
Я не думаю, что вы можете, step и проверка тесно связаны друг с другом. В будущем вы сможете переопределить функции stepUp() и stepDown() чтобы получить поведение, которое вы описываете, но я не исследовал, является ли это предполагаемым вариантом использования этих вещей. Я бы рекомендовал размещать их в списке рассылки WHATWG, спрашивая конкретно об этих функциях и описывая ваш вариант использования.
Для практических целей вы пытались установить step=1 и привязку к событию click для захвата? Я вижу, что, вероятно, возникнет проблема с различением кликов "вверх" и "вниз", но это может быть преодолимо. Однако может быть проще использовать text ввод, правильно установить атрибут pattern и реализовать свой собственный спиннер.
Ответ 2
Ну, во-первых, спасибо за этот очень интересный вопрос. Я многое узнал о проверке HTML5, выполнив поиск решения вашей проблемы.
Мои исследования привели меня к выводу, что API проверки формы HTML5 имеет интересный набор свойств, которые доступны только для чтения, но очень полезны для выполнения того, что вы хотите.
Мой подход к вашей проблеме состоял в том, чтобы сначала добавить атрибут novalidate к элементу формы, чтобы я мог контролировать, когда запускать проверку, а затем читать объект validity присоединенный к входу, чтобы я мог точно знать, какие есть ошибки проверки, и если единственной ошибкой является stepMismatch (это то, что вызывает недействительность чисел, таких как 199), я могу обойти весь процесс проверки. Кроме того, я могу показать нормальное поведение проверки HTML с помощью метода reportValidity().
Вот код, который я придумал, который, я надеюсь, делает то, что вы хотите:
var form = document.querySelector("form") // Get the form
var input = document.querySelector("#myInput") // Get the input to validate
form.addEventListener("submit", function(e) {
e.preventDefault() // Catch the submit
// Do the magic
if(onlyStepMatters(input.validity)){
form.submit()
}else {
form.reportValidity()
}
})
function onlyStepMatters(validityState) {
return !(
validityState.badInput || validityState.customError || validityState. patternMismatch || validityState.rangeOverflow || validityState.rangeUnderflow || validityState.tooLong || validityState.tooShort || validityState.typeMismatch || validityState.valueMissing
)
/* This is what the object looks like, notice I just skipped the stepMismatch */
/*
{
badInput,
customError,
patternMismatch,
rangeOverflow,
rangeUnderflow,
stepMismatch,
tooLong,
tooShort,
typeMismatch,
valid,
valueMissing,
}
*/
}
<form novalidate>
<input type="number" id="myInput" min="0" max="1000" step = "100" placeholder="Enter a number" required/>
<button type="submit">Send</button>
</form>
Ответ 3
Только с шагом, но вы можете использовать диапазон и добавить метки к ползунку, а затем использовать JavaScript, чтобы проверить близкое значение и установить его
лайк
function updateTextInput(val) {
if (val > 36) val = 50;
else if (val > 26) val = 36;
else if (val > 20) val = 26;
else if (val > 15) val = 20;
else if (val > 1) val = 15;
document.getElementById('textInput').value = val;
}
<input type='range' min='0' max='50' step='1' name='slide' list="settings" onchange="updateTextInput(this.value);">
<datalist id="settings">
<option>15</option>
<option>20</option>
<option>26</option>
<option>36</option>
<option>50</option>
</datalist>
<input type="text" id="textInput" />
Ответ 4
Я немного поиграл с вашим кодом, пытаясь добиться этого:
в идеале я хотел бы, чтобы значение было увеличено или уменьшено со значением 100
... и в итоге с некоторым сценарием:
- Определить увеличение или уменьшение шага с помощью клавиатуры или мыши,
- Используйте переменную
remainder для хранения результата расчета: value % 100, - Изменить параметр
step и value input, - Добавьте обратно переменную
remainder когда событие клавиатуры или мыши закончилось, и сбросьте параметр step обратно на 1 (необходимо для возможности отправки).
В этом рабочем фрагменте попробуйте изменить входное значение с помощью стрелок (на клавиатуре или с помощью мыши), начиная с числа, не делимого на 100:
var remainder = false;
var stepbefore;
$("[type='number']").bind('keydown mousedown', function() {
// If keyboard Up or Down arrow keys or mouse left button on the arrows
if (event.keyCode == 38 || event.keyCode == 40 || event.button === 0) {
// If there is already a change running, exit the function
if (remainder !== false) return;
var myStep = this.getAttribute("stepcustom"); // Get my "stepcustom" attribute
remainder = this.value % myStep;
this.value = Math.floor(this.value / myStep) * myStep;
stepbefore = this.step;
this.step = myStep;
}
});
$("[type='number']").bind('keyup mouseup', function() {
if (remainder !== false) {
this.value = +(this.value) + remainder;
this.step = stepbefore;
remainder = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form>
<input type="number" min="100" max="999999" step="1" stepcustom="100" />
<input type="submit" />
</form>
Ответ 5
Вот код, необходимый для достижения того, что вы просили. Я старался избегать пересчетов и изменения стандартного поведения, чтобы он был прозрачным для любого другого ограничения, которое можно было бы установить (обязательно, шаблон, диапазоны...).
Я тестировал только на Firefox и Chrome, но считаю, что он должен работать на любом недавнем браузере.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Disable validity constrains</title>
<!-- avoid highlight due to constrains -->
<style>#qty { box-shadow: unset; }</style>
</head>
<body>
<form>
<input id="qty" name="num" type="number" min="100" max="1000" step="100">
<input type="submit">
</form>
<script>
(function() {
var el = document.getElementById('qty');
el && el.addEventListener('invalid', function(event) {
if ('validity' in el) {
for (var state in el.validity) {
if (state == 'stepMismatch') { continue; }
if (el.validity[state]) { return true; }
}
event.preventDefault();
el.form.submit();
}
}, true);
})();
</script>
</body>
</html>
Ответ 6
внутри события "изменить" раунд до ближайшего действительного значения.
$( "[type='number']" ).change(function () {
var value = $(this).val());
var newValue = Math.round(value/100)*100
if (newValue < 100) {
newValue = 100;
}
if (newValue > 999999) {
newValue = 999999;
}
if (newValue === value ) {
return;
}
$(this).val(newValue)
})
Ответ 7
Попробуйте использовать функцию change()...
<form>
<input type="number" id="number" min="100" max="999999" step="100" />
</form>
$(document).ready(function(){
$("#number").change(function(a){
if ($(this).val() % 100 === 0) {
/* Do something when the number is even */
console.log("EVEN");
} else {
/* Or when it odd (isn't dividable by 100), do ... whatever */
console.log("ODD");
}
})
});
И я тестировал его с помощью начальной загрузки, как в примере, который вы хотите, когда пользователь щелкает вверх значение становится 200 (из 199), когда пользователь нажимает вниз значение становится 100
Чтобы изменить делимую:
if ($(this).val() % 100 === 0) { //Change 100 with what ever you want
Ответ 8
Это простая функция JavaScript, которая может помочь вам
где prev_num - глобальная переменная
это будет работать для увеличения и уменьшения как
var perv_num=0;
function ax(z)
{
let def;
let mul=10;
let valu;
let valucopy=parseInt(z.value);
let frst;
valucopy=((valucopy+100)%100);
if (parseInt( z.value)<100)
{
document.getElementById("myNumber").value="";
document.getElementById("myNumber").value=100;
}
else if(parseInt( z.value)<perv_num)
{
def=parseInt( z.value.length);
mul=Math.pow(mul,def-1);
frst=(parseInt(z.value[0])*mul);
document.getElementById("myNumber").value="";
document.getElementById("myNumber").value=frst;
}
else if(valucopy ==0)
{
document.getElementById("myNumber").value="";
document.getElementById("myNumber").value=parseInt(z.value)+100;
}
else{
def=parseInt( z.value.length);
mul=Math.pow(mul,def-1);
frst=(parseInt(z.value[0])*mul);
valu=Math.abs( parseInt(z.value)-frst);
valu=100-valu;
var number=(parseInt(z.value)+valu);
document.getElementById("myNumber").value="";
document.getElementById("myNumber").value= number;
}
perv_num=parseInt( z.value);
}
и HTML это как
<input type="number" id="myNumber" onchange="ax(this)">
скрипка это https://jsfiddle.net/ecpy5gr0/1
Ответ 9
Я делаю скрипт для динамического изменения атрибута шага:
/*
jQuery Optional Number Step
Version: 1.0.0
Author: Arthur Shlain
Repo: https://github.com/ArthurShlain/JQuery-Optional-Step
Issues: https://github.com/ArthurShlain/JQuery-Optional-Step/issues
*/
(function ($) {
$.fn.optionalNumberStep = function (step) {
var $base = $(this);
var $body = $('body');
$body.on("mouseenter mousemove", '[data-optional-step]', function () {
$(this).attr("step", $(this).attr('data-optional-step'));
});
$body.on("mouseleave blur", '[data-optional-step]', function () {
$(this).removeAttr("step");
});
$body.on("keydown", '[data-optional-step]', function () {
var key = event.which;
switch (key) {
case 38: // Key up.
$(this).attr("step", step);
break;
case 40: // Key down.
$(this).attr("step", step);
break;
default:
$(this).removeAttr("step");
break;
}
});
if (step === 'unset') {
$base.removeAttr('data-optional-step');
}
if ($.isNumeric(step)) {
$base.attr('data-optional-step', step);
}
}
}(jQuery));
jQuery(function() {
$('.optional-step-100').optionalNumberStep(100);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container mt-5">
<h1>JQuery Optional Number Step</h1>
<div class="form-group" style="max-width: 300px">
<label>Example</label>
<input type="number" class="form-control optional-step-100" value="0">
<small id="emailHelp" class="form-text text-muted">Dynamic step for this field is 100
<br>You can specify any numeric value on keyboard.
<br>HTML5 step validation will not be applied.</small>
</div>
<a class="btn btn-dark btn-sm" href="#" onclick="location.href='https://github.com/ArthurShlain/JQuery-Optional-Step'; return false;" target="_blank">View on GitHub</a>
</div>
