input输入限制最大位数,详解maxlength属性在textarea里竟然的显现

By admin in 4858美高梅 on 2019年4月12日

input输入限制最大位数,详解maxlength属性在textarea里竟然的显现。先是,限制输入最大位数时,input有自带的性质maxlength。

当大家应用项目number的input输入框的时候,大家也许需求限制输入的位数,这年常见会想到maxlength,不过maxlength是在number类型的时候是不协理的,上面是一对解决那种难题的秘籍。

详解maxlength属性在textarea里竟然的表现,maxlengthtextarea

HTML伍给表单带来了不以为奇变动,比如前天要说的maxlength,这几个天性能够限制输入框输入的最大字字符数,更有益于的是对此粘贴的剧情也能够基于字符数自动截断。

多年来就收下那要叁个急需,限制用户最多输入600字(汉字和字母不区分),对于粘贴的情节也要能自动截断,输入600字后就无法输入。

第近期间想到了maxlength,基本满足供给,但要么有局地怪异的显现。

看上面包车型客车代码:

<textarea name="text" id="text" maxlength="600"></textarea>
<p>/600</p>
text.oninput = function() {
  already.textContent = text.value.length;
}

上述代码中限制输入字符数为600,并通过oninput监听用户的输入,未有用keydown,因为keydown只能监听用户键盘输入,对于粘贴没有反应。。。oninput能够形成。

那时直接输入600字后就不再能够输入,删除一些,再输入1些,表现平常。奇怪的是借使你粘贴进textarea里一大堆文字,以为maxlength的存在活动截断,此时textarea里恰恰有600个字符,那时候你剔除一些字符,然后再品尝输入,你会发现:

卧槽,不只怕输入了!!!再删的多1些,那时能够一而再输入,不过!!!在输入还不到600字符的时候,突然又不能输入了!!!

chrome下以及小编的android机器下都会这么。。一时半刻不掌握原委。测试了下input,不会有这么的景色出现,而且maxlength属性的值小壹些的话就不会有那种景况,比如十。。。

那样的话maxlength就不可靠了,就本人多写点代码吧,既然oninput这么手巧,就用它了。

修改下代码,去掉textarea的maxlength属性,使用input监听textarea的value值,超越600就活动截断,造成壹种不可能输入的错觉。

text.oninput = function() {
  if(text.value.length >= 600) {
    text.value = text.value.substr(0,600);
  }
  already.textContent = text.value.length;
}

不放心的话,能够再三再四监听keydown事件,在输入大于600字符后阻止暗许事件,但是有几个键是不可能禁止的:删除退格和回车:

text.onkeydown = function() {
  if(text.value.length >= 600) {
    // 删除:46 退格:8 回车:13
    if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
      e.preventDefault();
    }
   }
}

IE捌以下不援助maxlength属性,也不帮助oninput,不过她们有一个更有力的法子:onpropertychange。

上边通过1端代码讲解textarea达成maxlength属性

<script language="javascript" type="text/javascript"> 
function textlen(x,y){ 
 var thelength = x.value.length; 
 window.status=thelength+' of '+y+' maximum characters.'; 
} 
function maxtext(x,y){ 
 tempstr = x.value 
 if(tempstr.length>y){ 
  x.value = tempstr.substring(0,y); 
 } 
 textlen(x,y); 
} 
</script> 
<form name="myform"> 
   <textarea name="mytextarea"  
              cols="45"  
              rows="3"  
              wrap="virtual"  
              onkeypress="return(this.value.length<20)" 
              onkeydown="textlen(this,20)"  
              onkeyup="textlen(this,20)"  
              onblur="maxtext(this,20)">
   </textarea> 
</form> 

HTML伍给表单带来了不少改观,比如明日要说的maxlength,这些性情能够限制输入框输入的最大字字符数,更便宜的是对于粘贴的剧情也能够依据字符数自动截断。

<input type="text" name="email" maxlength="55" />

1)max和min

max和min是number输入框所支持的,那样如若我们要限量输入拾人的手提式有线电话机号码,就足以用如下代码

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

如此那般不会限制用户输入,但会在用户提交的时候唤醒。

[示例] 

你或者感兴趣的篇章:

  • JQuery为textarea添加maxlength属性的代码
  • TextArea不援助maxlength的消除办法(jquery)
  • TextArea设置MaxLength属性最大输入值的js代码
  • JQuery为textarea添加maxlength属性并且包容IE
  • textarea不可能通过maxlength属性来界定字数的缓解办法

HTML五给表单带来了众多改动,比如前日要说的maxlength,那些性子能够界定输入框输入的…

近期就接受那要3个供给,限制用户最多输入600字(汉字和字母不区分),对于粘贴的始末也要能自动截断,输入600字后就不可能输入。

使用方法:maxlength=”位数”

2)oninput事件

对结余的位数实行slice处理,举行删除

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

只是那或许和maxlength的逻辑略有差异,这就是当咱们将光标挪到从前输入的数字之间的时候,大家就会发觉,再输入数字,会造成最终面包车型大巴数字被删去。

[示例] 

第目前间想到了maxlength,基本满足急需,但要么有局部奇怪的表现。

唯独,对于那几个性子他是有谈得来的限量标准的

3)keydown

4858美高梅 ,keydown事件能够辅助大家在按下数字之后,判断一下脚下input中的value的位数,要是超越位数就return
false,那样不管光标的职责在哪儿,都不会输入新的数字。

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

不过那会导致在满意三个数字的时候,再按删除键(也许说是全部按键)失效。╮(╯﹏╰)╭真的难堪了

[示例] 

看下边包车型地铁代码:

定义和用法
maxlength 属性规定输入字段的最大长度,以字符个数计。

maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。

4)借助keypress,keydown和oninput

 1 <input name="myInput_DRS" onkeypress="return isNumeric(event)" onkeydown="return isMoreThan(event)" oninput="maxLengthCheck(this)" type="number" placeholder="Type..." min="1" max="999" />
 2 
 3 <script>
 4   function maxLengthCheck(object) {
 5     if (object.value.length > object.max.length)
 6       object.value = object.value.slice(0, object.max.length)
 7   }
 8 
 9   function isNumeric(evt) {
10     var theEvent = evt || window.event;
11     var key = theEvent.keyCode || theEvent.which;
12     key = String.fromCharCode(key);
13     var regex = /[0-9]|\./;
14     if (!regex.test(key)) {
15       theEvent.returnValue = false;
16       if (theEvent.preventDefault) theEvent.preventDefault();
17     }
18   }
19 
20   function isMoreThan(evt) {
21     var theEvent = evt || window.event;
22     var target = theEvent.target;
23     var keyID = event.keyCode;
24     var isDelete = false;
25     switch (keyID) {
26       case 8:
27           isDelete = true;
28         // alert("backspace");
29         break;
30       case 46:
31           isDelete = true;
32         // alert("delete");
33         break;
34       default:
35         break;
36     }
37 
38     if (!isDelete && target.value.length == target.max.length) {
39       return false;
40     }
41   }
42 
43 </script>

[示例] 

<textarea name="text" id="text" maxlength="600"></textarea>
<p>/600</p>
text.oninput = function() {
  already.textContent = text.value.length;
}

实际上支付进程中,供给和大好图景是有反差的,限制位数的输入多为限制数字,比如金额,只个时候我们既要约束输入类型,同时还要限制位数。

5)input parttern

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

唯独包容性不佳,Internet Explorer 拾、Firefox、Opera 和 Chrome 协助pattern 属性。

注意:Safari 只怕 Internet Explorer 玖 及此前的本子不援助 <input>
标签的 pattern 属性。

[示例] 

上述代码中限制输入字符数为600,并透过oninput监听用户的输入,未有用keydown,因为keydown只能监听用户键盘输入,对于粘贴未有反应。。。oninput能够成功。

在长辈的驾驭下,搭配tel属性能够兑现效益,在手提式有线电话机上打开,激活输入框私下认可调用机械键盘。

6)input[type=tel]

在活动装备上,input[type=tel]
是永葆maxlength的,而且只好输入数字键盘。

那时候直接输入600字后就不再能够输入,删除壹些,再输入一些,表现寻常。奇怪的是假若您粘贴进textarea里一大堆文字,以为maxlength的存在活动截断,此时textarea里刚刚有600个字符,那时候你剔除1些字符,然后再品尝输入,你会发现:

 <input id="money" maxlength="8" type="tel" placeholder="50000" style="color:#333" /> 元

卧槽,不能够输入了!!!再删的多一些,那时能够三番五次输入,不过!!!在输入还不到600字符的时候,突然又不可能输入了!!!

 

chrome下以及自笔者的android机器下都会这么。。一时不知情原因。测试了下input,不会有这般的景况出现,而且maxlength属性的值小壹些的话就不会有那种景况,比如10。。。

那般的话maxlength就不可靠了,就和好多写点代码吧,既然oninput这么手巧,就用它了。

修改下代码,去掉textarea的maxlength属性,使用input监听textarea的value值,超越600就自动截断,造成一种不恐怕输入的错觉。

text.oninput = function() {
  if(text.value.length >= 600) {
    text.value = text.value.substr(0,600);
  }
  already.textContent = text.value.length;
}

不放心的话,能够继承监听keydown事件,在输入大于600字符后阻止默许事件,可是有多少个键是不能够禁止的:删除退格和回车:

text.onkeydown = function() {
  if(text.value.length >= 600) {
    // 删除:46 退格:8 回车:13
    if (!(e.which == '46' || e.which == '8' || e.which == '13')) {
      e.preventDefault();
    }
   }
}

IE捌以下不支持maxlength属性,也不援救oninput,不过她们有一个越来越强硬的主意:onpropertychange。

下边通过一端代码讲解textarea完结maxlength属性

<script language="javascript" type="text/javascript"> 
function textlen(x,y){ 
 var thelength = x.value.length; 
 window.status=thelength+' of '+y+' maximum characters.'; 
} 
function maxtext(x,y){ 
 tempstr = x.value 
 if(tempstr.length>y){ 
  x.value = tempstr.substring(0,y); 
 } 
 textlen(x,y); 
} 
</script> 
<form name="myform"> 
   <textarea name="mytextarea"  
              cols="45"  
              rows="3"  
              wrap="virtual"  
              onkeypress="return(this.value.length<20)" 
              onkeydown="textlen(this,20)"  
              onkeyup="textlen(this,20)"  
              onblur="maxtext(this,20)">
   </textarea> 
</form> 

你或然感兴趣的稿子:

  • JQuery为textarea添加maxlength属性的代码
  • TextArea不帮衬maxlength的化解办法(jquery)
  • TextArea设置马克斯Length属性最大输入值的js代码
  • JQuery为textarea添加maxlength属性并且包容IE
  • textarea无法透过maxlength属性来界定字数的消除形式

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有