`
aerchi
  • 浏览: 424870 次
  • 性别: Icon_minigender_1
  • 来自: 昆明
文章分类
社区版块
存档分类
最新评论

JAVASCRIPT应用篇（5）－－设置TEXTAREA的MAXLENGTH属性

 
阅读更多

标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用，只有当事件发生时才起作用

如下：http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp

但TEXT中有且起作用<input type="text" maxlength="20">，

那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢。

方法1、如果只需要截取多少个字符的内容，则可以:

<textarea onkeyup="this.value = this.value.slice(0, 80)"></textarea>

或

<textarea onkeyup="this.value = this.value.substring(0, 80)"></textarea>

方法2、

<script type="text/javascript">
function ismaxlength(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}
</script>

<textareamaxlength="40" onkeyup="return ismaxlength(this)"></textarea>

这个方法采用截断法，输入到最后一个字符的时候如果再输入则会显示光标闪烁。但可以解决使用CTRL+C复制过来的长度限制问题,但如果用鼠标复制过来的不还是不行。

方法3、这个方法直接判断输入的长度

<script language="javascript" type="text/javascript">

<!--

function imposeMaxLength(Object, MaxLen)

{

return (Object.value.length <MaxLen);

}

-->

</script>

<textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ></textarea>

当输入内容大于15时因为返回为false所以这个实现不会显示光标闪烁的问题，但没有解决复制过来的长度限制问题即复制过来的内容可以超过最大长度限制

注意这个帖子里使用的情况如：http://psacake.com/web/js.asp

return (Object.value.length <=MaxLen);但我测试发现当输入字节数=maxlen时还可以输入一个字符，所以我改成 return (Object.value.length <MaxLen);

方法4、其实方法4是方法2与方法3的基础上进一步优化。客观的说方法2与方法3都只做了一部分工作

看下面链接：http://www.codingforums.com/showthread.php?t=2224




[xhtml] view plaincopy




    

  1. <mce:scriptlanguage="javascript"type="text/javascript"><!--
    2. 

  2. functiontextlen(x,y){
    3. 

  3. varthelength=x.value.length;
    4. 

  4. window.status=thelength+'of'+y+'maximumcharacters.';
    5. 

  5. }
    6. 

    7. 

  7. functionmaxtext(x,y){
    8. 

  8. tempstr=x.value
    9. 

  9. if(tempstr.length>y){
    10. 

  10. x.value=tempstr.substring(0,y);
    11. 

  11. }
    12. 

  12. textlen(x,y);
    13. 

  13. }
    14. 

  14. //--></mce:script>
    15. 

    16. 

  16. <formname="myform">
    17. 

  17. <textareaname="mytextarea"
    18. 

  18. cols="45"
    19. 

  19. rows="3"
    20. 

  20. wrap="virtual"
    21. 

  21. onkeypress="return(this.value.length<20)"
    22. 

  22. onkeydown="textlen(this,20)"
    23. 

  23. onkeyup="textlen(this,20)"
    24. 

  24. onblur="maxtext(this,20)"
    25. 

  25. >
    26. 





上面的方法在原来的基础上加了onblur事件，这主要用于处理当用户不是采用输入而是通过复制粘贴方法来完成文本的转入时的问题。
实际就是方法2与方法3的结合版。 以下是我为TextArea增加并利用maxlength属性及结合上例的结果：
<html>
<head>
<script type="text/javascript">
function ismaxlength(obj){
	var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
	if (obj.getAttribute && obj.value.length>mlength)
		alert('该文本框允许输入最大长度为'+mlength+"个字符,超出内容将会被截断")
		obj.value=obj.value.substring(0,mlength)
	}
function imposeMaxLength(obj)
{
  var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
  return (obj.value.length <mlength);
}
</script>
</head>
<body>
<form name="myform">
   <textarea maxlength="5" onkeypress="return imposeMaxLength(this)" onblur="ismaxlength(this)"></textarea>
</form>
</body>
</html>


对于些问题的其它主要解决方法可见下面链接：
利用JQUERY框架实现：http://viralpatel.net/blogs/2008/12/set-maxlength-of-textarea-input-using-jquery-javascript.html
http://www.codingforums.com/showthread.php?t=2224
http://www.insidedhtml.com/ie5/htc/ts08/page2.asp
http://inmyexperience.com/archives/000327.shtml


http://blog.csdn.net/luweifeng1983/article/details/3935040



  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      Excel使用技巧
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      JavaScript实现textarea的maxlength
                    
                  
    
                  
    NULL 博文链接：https://yelb.iteye.com/blog/1141762
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Vue实现动态显示textarea剩余字数
                    
                  
    
                  
    textarea maxlength="200" @input="descInput" v-model="desc" /&gt; &lt;span&gt;{{remnant}}/200  javascript代码如下：  data(){  return{  remnant: 200  } } methods:{  descInput(){  var txtVal = this.desc.length...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jquery.confine:Textarea maxlength，正确完成
                    
                  
    
                  
     HTML textarea本身不像文本输入一样实现maxlength属性。 jQuery.confine是一个简单的jQuery插件，可以正确地实现此功能，避免了大多数天真的实现会遇到的许多问题，同时还可以选择利用jQuery 1.4中的新HTML5标准和...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jquery-textcounter:计算 textarea 中键入的字符数，并显示在达到最大允许字符数之前还剩多少个字符
                    
                  
    
                  
    jquery-textcounter  计算 textarea 中键入的字符数，并显示在达到最大允许字符数之前还剩多少个字符。... textarea maxlength =" 255 " placeholder ="" id =" comment " &gt; &lt;/ textarea &gt;
    
                
    
                
              
                
                
                
    
                  
    
                    
                      javascript textarea字数限制
                    
                  
    
                  
    这一个是读取textarea的maxlength属性的值，进行计算，思路很好，但修改起来就麻烦啊，不过对于js爱好者来说是个不错的参考，通过读取属性值进行控制。     textarea字数限制 练习代码多有参考网络 by ahuinan      ...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      用于Textarea的MaxLength验证的插件
                    
                  
    
                  
    一个用于执行textarea的maxlength验证的插件
    
                
    
                
              
                
                
                
    
                  
    
                    
                      正则表达式
                    
                  
    
                  
    \w	匹配一个可以组成单词的字符(alphanumeric，这是我的意译，含数字)，包括下划线，如[\w]匹配"$5.98"中的5，等于[a-zA-Z0-9] \W	匹配一个不可以组成单词的字符，如[\W]匹配"$5.98"中的$，等于[^a-zA-Z0-9]。  用re...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      freeChars:可用的字符计数器和maxlength属性polyfill用于的
                    
                  
    
                  
     也可以用作“最大长度”（maxlength）属性的polyfill。用法包括脚本： &lt;!-- jQuery (1.9 or newer). --&gt;&lt; script type =" text/javascript " src =" //code.jquery.com/jquery-2.1.1.min.js " &gt; &lt;/ ...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      用JavaScript限制textarea输入长度 (For: IE、Firefox …)[
                    
                  
    
                  
    Code：用JavaScript限制textarea输入长度 (For: IE、Firefox …)   body {font-size:14px;}    maxlength=10   maxlength=20    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
    
                
    
                
              
                
                
                
    
                  
    
                    
                      html入门到放弃笔记
                    
                  
    
                  
     1、创建一个 div 标记 ，增加属性 ，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为 这是一个div   这是一个div"&gt;  四大标准属性：  1、id ：定义元素在页面中独一无二的...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JavaScript文本框脚本编写的注意事项
                    
                  
    
                  
     value属性可以设置文本框的初始值。  maxlength特性则是用于指定文本框内可以接受的最大字符数。   textarea的初始值则必须放在开始和结束标签之内。  cols是文本框字符行数；    rows是文本框字符列数；   另外，...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      a2x-text-counter:jQuery文本计数器插件
                    
                  
    
                  
     如果您的textarea具有maxlength属性，则该插件将充当倒数计数器。 在其他地方，它计算输入符号的数量。 正在安装 您可以通过执行bower install a2x-text-counter来通过bower安装它。 用法  &lt; html &gt; &lt; ...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      通用JS表单验证
                    
                  
    
                  
     或,&lt;textarea maxlength="2000" lengthInfo="最大长度不能超过2000！"&gt; 3、一般验证方式(不对空值做验证）: 　如：^(19|20)[0-9]{2}$" errorInfo="不正确的年份!" &gt; 4、标准验证(不与其它验证方式同时使用）：  ...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      java 正则表达式
                    
                  
    
                  
    单行文本框控制
&lt;INPUT type="text" id="Text1" name="Text1" onpropertychange="MaxLength(this, 5)"&gt;
多行文本框控制:
&lt;TEXTAREA rows="14"cols="39" id="Textarea1" name="Textarea1" ...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      一个简单的网页设计
                    
                  
    
                  
    					&lt;div class="onelinetwo"&gt;&lt;textarea id="desc" class="textarea" rows="5" cols="80"&gt;&lt;/textarea&gt;  &lt;div class="clear"&gt;&lt;/div&gt;  （仅支持纯文本，最多300字） 				 			&lt;/tr&gt;			 			 				...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      浮点vfdsfJAVA实现链表,双向链表.txtJAVA实现链表,双向链表.txt
                    
                  
    
                  
    				&lt;td&gt;&lt;textarea name="txt_desc" id="txt_desc" cols="" rows=""&gt;&lt;/textarea&gt; 				 				 				&lt;th&gt;&nbsp; 				 					 					描述&gt;=20个字符,不支持HTML标签。 					详细的资源描述有机会获得我们的推荐，更有利于...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      jquery.chineselengthlimit:这是一个可以限制文字框（input[type='text']） 与文字输入区域（textarea） 输入中英文字数的jQuery Plugin
                    
                  
    
                  
    若目标对象有maxlength属性，则以此数字限制。但若在$( 元素).ChineseLengthLimit( opts )中有传入字数限制，则以此设定为最优先。  isByte 是否采用位元限制。预设值为true 。若采用，则会以中文字以2 字元、英文字...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      ASP.NET常用代码
                    
                  
    
                  
    &lt;script language="javascript" for="document" event="onkeydown"&gt; if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event....
    
                
    
                
              
                
                
                
    
                  
    
                    
                      ASP.NET程序中常用的三十三种代码.txt
                    
                  
    
                  
    　5.点击表格行链接另一页 private void grdCustomer_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { 　//点击表格打开 　if (e.Item.ItemType == ListItemType.Item || e....
    
                
    
                
              
                
                
                
    
                  
    
                    
                      simple-lorem-ipsum:Simple lorem ipsum - 面向 Web 开发人员的 Firefox Webextension
                    
                  
    
                  
    简单的Lorem Ipsum 此扩展将一个简单的 Lorem Ipsum 文本插入到表单字段和可编辑的内容元素中。 此外，它还提供了一种编辑模式来自定义...变更日志版本 1.3.0： [改进]尊重 maxLength 属性版本 1.2.0： [改进]更好地支
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics