HTML5输入类型=数字更改步骤行为 [英] HTML5 input type=number change step behavior

问题描述

如果我使用step =100的type =number的输入字段。
我不希望奇数无效。
我只想增加或减少价值1000。

If I use an input field of type="number" with step="100". I don't want odd numbers to be invalid. I just want increase or decrease to be with a value of 1000.

<input type="number" min="100" max="999999" step="100" />

如果用户输入值199并提交，则他/她会收到错误，因为该值不能被100除尽。
但是，我想要的所有步骤值都是为了控制微调器的行为，例如如果用户点击，我希望199的值变为200，如果他/她点击下来，我希望它变成100.或者理想情况下，我希望值增加或减少，值为100。

If the user enters the value "199" and submits, he/she gets an error because the value isn't dividable by 100. But all I want with the step-value is to control the behavior of the spinner, e.g. if the user click up I want the value 199 to become 200 and if he/she clicks down I want it to become 100. Or ideally I would like the value to be increased or decreased with a value of 100.

我该怎么做？
我尝试使用无效事件（使用jQuery 1.7.2），如下所示：

How do I do this? I tried using the invalid event (with jQuery 1.7.2) like this:

$( "[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;
    }
} );

但是这会导致表单未被提交。

But this results in the form not being submitted.

PS：这是在Fedora 16上的Google Chrome 20.0.1132.57中。

PS.: This is in Google Chrome 20.0.1132.57 on Fedora 16.

推荐答案

我不认为你可以，步骤，验证是紧密联系在一起。在将来，您可以覆盖 stepUp（）和 stepDown（）函数获取你描述的行为，但我没有研究过，如果这是这些事情的预期用例。我建议在 WHATWG邮件列表上发帖，具体询问这些功能并描述你的用例。

I don't think you can, the step and the validation are closely tied together. In the future you may be able to override the stepUp() and stepDown() functions to get the behaviour you describe but I've not researched if this is an intended use case for these things. I would recommend posting on the WHATWG mailing list, asking specifically about those functions and describing your use case.

对于当前的实践目的，你尝试设置 step = 1 并绑定到点击事件来捕获？我可以看到，可能会出现区分向上和向下点击的问题，但这可能是可以克服的。然而，使用 text 输入，适当地设置模式属性并实现您自己的微调器可能会更容易。

For current practical purposes have you tried setting step=1 and binding to a click event to capture? I can see there'll probably be an issue with distinguishing between 'up' and 'down' clicks but that might be surmountable. It might be easier all round however to use a text input, set the pattern attribute appropriately and implement your own spinner.

这篇关于HTML5输入类型=数字更改步骤行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！