HTML5输入类型=数字更改步骤行为

Question

如果我使用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中.

Answer 1

我认为你不能,step而且验证是紧密联系在一起的.在将来,您可以覆盖stepUp()和stepDown()函数来获取您描述的行为,但我还没有研究过这是否是这些事情的预期用例.我建议在WHATWG邮件列表上发帖,具体询问这些功能并描述您的用例.

出于当前的实际目的,您是否尝试过设置step=1和绑定到click要捕获的事件？我可以看到,区分"向上"和"向下"点击可能存在问题,但这可能是可以克服的.然而,可能更容易使用text输入,pattern适当地设置属性并实现自己的微调器.

Answer 2

好吧，首先感谢您提出这个非常有趣的问题。通过搜索问题的解决方案，我已经学到了很多有关HTML5验证的知识。

我的研究使我发现HTML5表单验证API具有一组有趣的属性，这些属性是只读的，但是对完成您想做的事情非常有用。

我对您的问题的解决方法是先将novalidate属性添加到form元素，以便我可以控制何时触发验证，然后读取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>

我很确定可以基于相同的逻辑来重构此代码并使其更加简洁，但是我没有足够的时间来思考它。

任何建设性的意见将不胜感激。

希望这可以帮助。