![](/img/trans.png)
[英]Change step in HTML5 <input type=“range”> on certain value
[英]HTML5 input type=number change step behavior
如果我使用type =“number”的输入字段,其中step =“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。:这是在Fedora 16上的Google Chrome 20.0.1132.57中。
我不认为你可以, step
和验证是紧密联系在一起的 。 在将来,您可以覆盖stepUp()
和stepDown()
函数来获取您描述的行为,但我还没有研究过这是否是这些事情的预期用例。 我建议在WHATWG邮件列表上发帖,具体询问这些功能并描述您的用例。
出于当前的实际目的,您是否尝试过设置step=1
并绑定到click
事件来捕获? 我可以看到,区分“向上”和“向下”点击可能存在问题,但这可能是可以克服的。 然而,可能更容易使用text
输入,适当地设置pattern
属性并实现自己的微调器。
好吧,首先感谢你提出这个非常有趣的问题。 通过搜索问题的解决方案,我学到了很多关于HTML5验证的知识。
我的研究让我发现HTML5表单验证API有一组有趣的属性是只读的,但对于你想要的东西非常有用。
我对你的问题的处理方法是首先将novalidate
属性添加到表单元素,这样我就可以控制何时触发验证,然后读取附加到输入的validity
对象,这样我就可以准确地知道哪些验证错误,以及如果唯一的错误是stepMismatch
(这是触发数字无效的原因,如199),我可以绕过所有的验证过程。 另外,我可以使用reportValidity()方法显示正常的HTML验证行为。
这是我想出的代码,我希望能做到你想要的:
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>
我很确定这个代码可以重构,并且基于相同的逻辑变得更简洁,但我没有足够的时间来思考它。
任何建设性的评论将不胜感激。
希望这可以帮助。
只有步骤但你可以使用范围并添加标记到滑块然后使用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" />
我一直在玩你的代码,尝试实现这个目标:
理想情况下,我希望值增加或减少值为100
...并以一些脚本结束:
remainder
变量来存储计算结果: value % 100
, step
参数和input
value
, 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>
希望能帮助到你。
这是实现你所要求的所需代码,我试图避免重新计算和改变标准行为,因此这应该对任何其他约束设置(必需,模式,范围......)是透明的。
我只在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>
在“更改”事件内部舍入到最接近的有效值 。
$( "[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)
})
尝试使用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's odd (isn't dividable by 100), do ... whatever */
console.log("ODD");
}
})
});
而我正在使用bootstrap测试它,就像你想要的例子,当用户点击时该值将变为200(从199),当用户点击时该值将变为100
要改变可分割:
if ($(this).val() % 100 === 0) { //Change 100 with what ever you want
这是一个简单的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)">
我制作脚本动态更改步骤属性:
/* 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="https://github.com/ArthurShlain/JQuery-Optional-Step" target="_blank">View on GitHub</a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.