如果我在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。
发布于 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>
我非常确定这段代码可以根据相同的逻辑进行重构并变得更简洁,但我没有足够的时间来考虑它。
任何有建设性的意见都将不胜感激。
希望这能有所帮助。
发布于 2012-07-31 21:45:56
我不认为你可以,step
和验证都是closely tied together。将来,您也许能够覆盖stepUp()
and stepDown()
functions来获得您所描述的行为,但我还没有研究这是否是这些东西的预期用例。我建议在WHATWG mailing list上发表帖子,特别询问这些功能并描述您的用例。
出于当前的实际目的,您是否尝试过设置step=1
并绑定到要捕获的click
事件?我可以看到在区分“向上”和“向下”点击时可能会有一个问题,但这可能是可以克服的。不过,使用text
输入、适当设置pattern
属性并实现自己的微调器可能会更容易一些。
发布于 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
复制相似问题