HTML5 input type=number更改步骤行为
如果我在step=为“100”的情况下使用type="number“输入字段。我不希望奇数无效。我只希望增加或减少的值是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;
}
} );但这会导致表单无法提交。
附言:这是在Fedora 16上的Google Chrome 20.0.1132.57。
回答 6
Stack Overflow用户
发布于 2018-07-29 21:13:33
首先，谢谢你提出了这个非常有趣的问题。通过搜索您的问题的解决方案，我学到了很多关于HTML5验证的知识。
我的研究使我发现，HTML5表单验证应用程序接口有一个只读的interesting set of properties，但对于执行您想要的操作非常有用。
我解决这个问题的方法是首先向表单元素添加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>
我非常确定这段代码可以根据相同的逻辑进行重构并变得更简洁，但我没有足够的时间来考虑它。
任何有建设性的意见都将不胜感激。
希望这能有所帮助。
Stack Overflow用户
发布于 2012-07-31 21:45:56
我不认为你可以，step和验证都是closely tied together。将来，您也许能够覆盖stepUp() and stepDown() functions来获得您所描述的行为，但我还没有研究这是否是这些东西的预期用例。我建议在WHATWG mailing list上发表帖子，特别询问这些功能并描述您的用例。
出于当前的实际目的，您是否尝试过设置step=1并绑定到要捕获的click事件？我可以看到在区分“向上”和“向下”点击时可能会有一个问题，但这可能是可以克服的。不过，使用text输入、适当设置pattern属性并实现自己的微调器可能会更容易一些。
Stack Overflow用户
发布于 2014-07-31 23:01:41
只能使用step，但您可以使用range和向滑块添加标记，然后使用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" />
https://stackoverflow.com/questions/11738726
复制相似问题