码迷,mamicode.com
首页 > 其他好文 > 详细

完美兼容实现:解决textarea输入框限制字数长度(带统计功能)

时间:2020-07-05 22:49:28      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:UNC   tar   element   inner   输入   row   限制   键盘事件   content   

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>

  

 

完美兼容实现:解决textarea输入框限制字数长度(带统计功能)

标签:UNC   tar   element   inner   输入   row   限制   键盘事件   content   

原文地址:https://www.cnblogs.com/ypppt/p/13252198.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!