【问题标题】:How to set the max value and min value of <input> in html5 by javascript or jquery? [closed]如何通过javascript或jquery在html5中设置<input>的最大值和最小值? [关闭]
【发布时间】:2013-10-11 11:11:07
【问题描述】:

我正在尝试找出如何设置 javascript 或 jquery 输入的 html5 类型的最大值和最小值。

<input type="number" max="???" min="???" step="0.5"/>

有人指导吗

【问题讨论】:

标签: javascript jquery html


【解决方案1】:

jQuery 可以轻松地为元素设置任何属性 - 只需使用 .attr() method:

$(document).ready(function() {
    $("input").attr({
       "max" : 10,        // substitute your own
       "min" : 2          // values (or variables) here
    });
});

如果您的脚本块出现在您要操作的元素之后,则不需要文档就绪处理程序。

使用"input" 的选择器将设置所有 输入的属性,所以实际上你应该有一些方法来识别有问题的输入。如果你给它一个 id 你可以说:

$("#idHere").attr(...

...或有一个类:

$(".classHere").attr(...

【讨论】:

  • @Bmd - 在评论之前测试过吗?它确实 工作:jsfiddle.net/nbd0q2me - 我只在 Chrome 中对此进行了测试,但数字输入上的向上/向下按钮和表单提交按钮都使用显示的 JS 代码设置的值。 (并且无论它是否在 当前 浏览器中工作 - 它似乎 - 我在发布答案时对其进行了测试,并且它当时有效。)
【解决方案2】:

试试这个:

<input type="number" max="???" min="???" step="0.5" id="myInput"/>

$("#myInput").attr({
   "max" : 10,
   "min" : 2
});

注意:这会将最大值和最小值设置为单个输入

【讨论】:

    【解决方案3】:

    试试这个

     $(function(){
       $("input[type='number']").prop('min',1);
       $("input[type='number']").prop('max',10);
    });
    

    Demo

    【讨论】:

    • 在 chrome 浏览器中对我不起作用。
    • @nilakanthasinghdeo:请查看演示
    • @nilakanthasinghdeo 的小提琴一切都错了。输入不是type="number",而且您实际上还没有设置maxmin 值......
    • 扩展此答案,如果用户输入的值超出限制,您可能希望包含一个将输入重置为最大值/最小值的函数。我为自己的应用编写了这个 jQuery:$('input[type="number"]').on('keyup', function(){ if ($(this).val() &gt; $(this).attr('max')*1) { $(this).val($(this).attr('max')); } });
    • 是的,它没有达到目的。感谢您指出。删除它
    猜你喜欢
    • 2019-02-10
    • 1970-01-01
    • 1970-01-01
    • 2019-01-20
    • 2012-08-04
    • 2015-01-14
    • 2020-06-29
    • 2014-09-08
    • 1970-01-01
    相关资源
    最近更新 更多