如何限制HTML5“数字”元素中的可能输入?


359

对于<input type="number">元素,maxlength不起作用。如何限制该maxlength数字元素?


5
为人们寻找更好的解决方案,这是一个最好的: stackoverflow.com/questions/9361193/...
Ünsal科尔克马兹

4
max属性在android平板电脑的chrome浏览器中不起作用。
2014年

4
@ÜnsalKorkmaz:该解决方案的缺点在于它并不带来了数字键盘在Android设备上
威尔

Answers:


340

您还可以添加一个max属性,该属性将指定您可以插入的最大数字

<input type="number" max="999" />

如果同时添加maxmin,则可以指定允许值的范围:

<input type="number" min="1" max="999" />

以上内容仍不会阻止用户手动输入超出指定范围的值。相反,他将显示一个弹出窗口,告诉他在提交表单时输入此范围内的值,如以下屏幕快照所示:

在此处输入图片说明


4
克里斯特,这行得通。就像@Andy所说的那样,我已经使用oninput来分割附加数字。参考mathiasbynens.be/notes/oninput
Prasad

7
@Prasad-如果Andy的答案正确,请选择它,而不是投票最多的一个。
Moshe

81
这是正确的,但应注意,因为Andy指出这并不限制输入更长的数字。因此,它实际上不是等效于文本字段中的maxlength。
DA。

9
如果您只是输入了一个较高精度的浮点数,则它将中断。例如3.1415926来解决这个,因为它是小于999,大于1
0112

44
我不知道为什么当它根本不起作用时为什么会如此反对和接受!它不仅影响了“微调”的控制,并没有什么可以阻止用户键入一长串数字。
Codemonkey

115

您可以指定minmax属性,这将仅允许在特定范围内输入。

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

但是,这仅适用于微调器控制按钮。尽管用户可以输入比允许的数字大的数字max,但表单不会提交。

Chrome的数字大于最大值的验证消息
屏幕快照取自Chrome 15

可以oninput在JavaScript中使用HTML5 事件来限制字符数:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

11
这种JavaScript方法可能存在的一个问题:如果插入点不在值的末尾,则可能无法按预期工作。例如,如果在输入字段中输入值“ 1234”,然后将插入点移回该值的开头并键入“ 5”,则最终得到的值为“ 5123”。这与最大长度为4的输入type =“ text”字段不同,在该字段中,浏览器不允许您在“ full”字段中键入第5个字符,并且该值将保持为“ 1234”。
乔恩·施耐德

@Andy,显然,问题是在寻找非JS方式来做maxlength.............
Pacerier 2015年

4
@Pacerier:我的回答是否暗示我有其他想法?如您所见,我提供了仅使用HTML即可实现的最接近的解决方案,以及使用JavaScript的其他建议,OP可能希望防止用户输入超出允许范围的字符。
Andy E

84

如果要在Mobile Web解决方案中希望用户看到数字键盘,而不是全文键盘。使用type =“ tel”。它将与maxlength一起使用,可避免创建额外的javascript。

最大值和最小值仍将允许用户输入超出最大值和最小值的数字,这不是最佳选择。


3
很好的发现,这就像一个魅力,因为不必创建额外的javascript表示赞许。
迭戈

9
我发现这不是数字输入的最佳解决方案,因为“ tel”输入允许附加符号,并且在每个数字旁边显示字母。纯数字键盘看起来更干净。
hawkharris 2014年

@hawkharris您是正确的,type =“ number”是更干净的UI。意外输入错误的字符会更容易。因此,需要进行其他验证以确保用户不会输入错误的数据。但也请注意,用户也可以使用数字键盘轻松输入所有小数点。如果没有其他JavaScript,它也无法解决上述问题。
杜安2014年

1
谢谢你,我正在开发离子框架移动应用程序,这解决了我的问题
Ahmed

1
如果与pattern =“ [0-9] *”一起使用,则将禁用额外的符号
apereira

71

您可以像这样组合所有这些:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>


更新:
您可能还想阻止输入任何非数字字符,因为对于数字输入来说这object.length将是一个空字符串,因此其长度为0。因此该maxLengthCheck功能将不起作用。

解决方案:
请参见的例子。

演示 -在此处查看代码的完整版本:http
//jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

更新2:这是更新代码:https : //jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

更新3: 请注意,允许输入的小数点以上可能会弄乱数字值。


这是一个很好的解决方案,但是我发现如果输入任何非数字值,object.value.length将返回0。
安德鲁

1
@AndrewSpear那是因为,如果在设置了“数字”类型的输入中输入非数字值,则object.value将为空字符串。请参阅文档。另外,请阅读我的更新以解决此问题。
David Refoua 2014年

如果您输入多个小数点(例如111..1111),这仍然会中断。不要使用此代码来确保安全,因为恶意代码可能仍会通过。
PieBie 2015年

@PieBie Dude,此代码适用于3年前。改用jQuery。
大卫·雷富阿

1
是的,我知道,但是初学者仍然可以复制粘贴它。
PieBie

26

这非常简单,您可以使用一些JavaScript来模拟一个maxlength,并检查一下:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />

12
对于您的解决方案,一旦达到2个字符,就不能使用退格键。但我想念功能解决方案的几件事
Christophe Debove 2015年

12
代替onKeyDown,您应该使用onKeyPress。
Rupesh Arora

1
如果您突出显示文本并按一个字符(即替换输入的内容)将
不起作用

如果不是来自以下密钥,请对此进行验证stackoverflow.com/a/2353562/1534925
Akshay,2016年

3
问题keydown在于您不能在最大字符数处使用退格键。问题keypress在于您可以复制+粘贴超过最大字符数的字符。
Stavm '17

23

或者,如果您的最大值例如为99,最小值为0,则可以将其添加到输入元素中(您的值将被最大值等重写)。

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

然后(如果需要),您可以检查输入的是否为真的数字


...很好,但是您不再需要最小和最大花花公子。(只是说)
xoxel

2
如果您仍然希望显示警告消息,请执行@xoxel
DNKROZ

这真的很好...谢谢
Vincy Oommen

为了概括起见,我愿意onKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
Oriadam

18

您可以将其指定为文本,但可以添加pettern,仅与数字匹配:

<input type="text" pattern="\d*" maxlength="2">

它可以完美工作,并且可以在移动设备上(在iOS 8和Android上测试)弹出数字键盘。


IE9和更早版本不支持pattern属性,它在Safari中具有部分支持:caniuse.com/#feat=input-pattern
diazdeteran 2015年

是的,感谢您的指点,但是我们放弃了IE9支持(从中删除了芥末),与JS方法相比,我更喜欢它。取决于项目。
克里斯·帕纳约托夫

2
不会阻止用户以此输入非数字字符。他们可以输入2个字符。该pattern只导致验证突出。
英国广播公司

在Android 9(Nokia 8)上进行了测试,但我得到了常规键盘:(有什么想法吗?
oriadam

14

//For Angular I have attached following snippet.
<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

如果使用“ onkeypress”事件,那么在开发(单元测试)时将不会受到任何用户限制。如果您有不允许特定限制后不允许用户输入的要求,请看一下此代码,然后尝试一次。


1
我在这里看到的问题是:1.如果输入达到7个数字,则替换为选择文本和类型将不起作用2.当溢出的“寄宿生”命中时,将输入增加1-> 9999999并向上滑动按钮。打破限制
Edub

我尝试使用简单版本的javascript。如果需要,您可以查看使用运行代码段。因此,我没有发现任何限制。
Prasad Shinde

1
也没有发现任何限制。它停在7位数字。我正在为我的代码使用此解决方案。
克劳迪欧(Claudio)

有一个局限性。当您达到限制时,请全选并替换它们,这是行不通的。仅当在返回false之前用cur 1覆盖值时,替换才对我有用。
Insomnia88

@ Insomnia88,@ edub如果我们编写函数并检查必要条件,该怎么办...
Prasad Shinde

12

另一个选择是仅添加具有maxlength属性的任何内容的侦听器,并将切片值添加到该侦听器。假设用户不想在与输入相关的每个事件中使用函数。这是一个代码片段。忽略CSS和HTML代码,最重要的是JavaScript。

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>


10

最大长度不能以<input type="number"我所知的最好方式使用oninput事件来限制最大长度。请参见下面的代码以实现简单的实现。

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

像魅力一样工作!
SiboVG

9

可以说,您希望最大允许值为1000-键入或使用微调框。

您可以使用以下方式限制微调器的值: type="number" min="0" max="1000"

并限制什么是键盘使用JavaScript类型的: onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">

8

正如其他人所述,min / max与maxlength不同,因为人们仍然可以输入一个大于您期望的最大字符串长度的浮点数。要真正模拟maxlength属性,您可以在紧急情况下执行以下操作(这等效于maxlength =“ 16”):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

在中间插入时,slice将删除没有最终用户知识的字符。而最大长度会阻塞。
Pradeep Kumar Prabaharan 2015年

maxlength数字输入不支持@PradeepKumarPrabaharan 。在我的示例中,value.slice(0,16)除非输入值超过16个字符,否则不会插入。
thdoan 2015年

是不支持数字输入的最大长度..这个代码是GUD但最大长度的属性正是这种代码不符合..
普拉迪普库马尔Prabaharan

@TobiasGaertner type="number"会解决这个问题:)。
thdoan

@ 10basetom ...取决于浏览器...例如,在FF中,您仍然可以输入字符,并且在超出限制后它们不会停止-但与类型编号的概念有关,这是可以接受的解决方案。
Tobias Gaertner

6

Maycow Moura的答案是一个好的开始。但是,他的解决方案意味着,当您输入第二位数字时,将停止对该字段的所有编辑。因此,您不能更改值或删除任何字符。

以下代码在2处停止,但允许继续编辑;

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"

2
不。尝试粘贴一个值。
Qwertiy 2015年

6

我之前遇到过这个问题,我使用html5数字类型和jQuery的组合来解决。

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

脚本:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

我不知道这些事件是否有点矫kill过正,但这解决了我的问题。 JS小提琴


您可以轻松地粘贴性格。
杰西卡

4

HTML输入

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery的

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });

4

为数字输入设置最大长度的一种简单方法是:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

不适用于android chrome。onkeypress与此有关。
Aakash Thakur

3

与一样type="number",您指定max而不是maxlength属性,这是可能的最大数目。因此,用4位数字max应该是9999,5位数字99999,依此类推。

另外,如果要确保它为正数,可以设置min="0",以确保为正数。


3

啊。就像有人在实施它的过程中放弃了一半,以为没人会注意到。

无论出于何种原因,以上答案均未使用minmax属性。这个jQuery完成了它:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

如果您的那些“ jQuery-is-the-thevil”类型之一,它也可以作为不带jQuery的命名函数“ oninput”使用。


它无法正确回答问题,但是投票解决了我的问题:)
TrOnNe

2

当我发现你不能使用任何的onkeydownonkeypressonkeyup事件,包括移动浏览器的完整解决方案。顺便说一句onkeypress,在chrome / opera for android中已不推荐使用它,并且不再显示该信息(请参阅:UI Events W3C Working Draft,2016年8月4日)。

我想出了一个oninput仅使用事件的解决方案。您可能需要根据需要执行其他数字检查,例如负/正号或十进制和千位分隔符等,但首先应满足以下条件:

function checkMaxLength(event) {
	// Prepare to restore the previous value.
	if (this.oldValue === undefined) {
		this.oldValue = this.defaultValue;
	}

	if (this.value.length > this.maxLength) {
		// Set back to the previous value.
		this.value = oldVal;
	}
	else {
		// Store the previous value.
		this.oldValue = this.value;
		
		// Make additional checks for +/- or ./, etc.
		// Also consider to combine 'maxlength'
		// with 'min' and 'max' to prevent wrong submits.
	}
}

我还建议结合maxlengthminmax防止错误的提交上述几次陈述。


2
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

或者如果您想不输入任何内容

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

1

对于具有长度限制的数字输入,您也可以尝试此操作

<input type="tel" maxlength="3" />

@tiltdown键入错误。更正了答案。
shinobi 2014年

1

我知道已经有一个答案,但是如果您希望输入的行为与maxlength属性完全一样或尽可能接近,请使用以下代码:

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();

@Phill_t也许您可以启发我?我使用了您的代码,并且在主要的“ $(this).attr(“ maxlength”)”中总是可以正常工作。为什么使用“ $(this).attr(“ maxlength”)”会更好?如果它正在工作,而不仅仅是我测试并正在按预期工作的“ this.maxlength”,并且更短,恕我直言也更清晰阅读?我有想念吗?
markus s's

你是什​​么意思“交付2”?
Philll_t

抱歉,我很抱歉。“ this.maxLength”仅在keydown函数的范围内起作用。在函数“ addMax”中,“ this”是文档而不是预期的元素,因此具有不同的属性值。我将如何访问数字输入?上面的代码真的对您有用吗?我使用Chrome / Opera / Vivaldi,Firefox,Edge,IE和Safari进行了测试,每个浏览器的结果相同。好的,在Edge中,maxlegth =“ 1”和maxlength =“ 2”确实可以工作,但是“ $(this).attr(” maxlength“)”不会再增加任何更大的数字!!@anybody:有什么建议吗?
markus s

正如我所说的,它总是两个,因为它是在文档上而不是在调试时发现的有问题的元素上调用的。顺便说一句,您可能还想看看我在研究您的解决方案后得出的解决方案:stackoverflow.com/a/41871960/1312012
markus s


0

这可能会帮助某人。

使用少量的javascript,您可以搜索所有datetime-local输入,搜索用户尝试输入的年份(未来大于100年):

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.