• 豌豆资源网
  • 开引网企业服务
  • 服务外包网
  • 完美兼容实现:解决textarea输入框限制字数长度(带统计功能)

    extarea称文本域【文本区】,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到。textarea有maxlength属性,但是textarea不兼容ie8/9。如何实现textarea输入框限制字数长度的兼容问题呢?

     

    通常的做法就是使用JavaScript脚本语言来实现对textarea文本域的字数输入限制,主要思路就是先定义一个显示区域,创建键盘事件(onkeyup或onkeydown),利用函数统计字数,判断后再显示。

     

    实现代码如下:

    html:

    <textarea id="contents" rows="3"  maxlength="20" 
    	onchange="sizecontrol()" onkeydown="sizecontrol()" onkeyup="sizecontrol()" 
    ></textarea> 
    <span id="ts">已输入字符: </span></p>
    

      

    js:

    <script>
    var maxl=20//总长  
    function sizecontrol(){  
    	var contents=document.getElementById("contents"),
    		ts=document.getElementById("ts"),
       		len=contents.value.length;  
       	if(len>maxl){
       		contents.value=contents.value.substr(0,maxl)
       	}else{
       		ts.innerhtml="已输入:"+len+"/"+maxl+" 字符"
       	} 
    }  
    </script>
    

      

     

    posted @ 2020-07-05 22:20  前端一点红  阅读(2686)  评论(0编辑  收藏  举报
  • 乐游资源网
  • 热爱资源网
  • 灵活用工代发薪平台
  • 企服知识
  • 355软件知识