通过js控制输入的字数

有两种控制字数的形式,一种是一个字母、一个空格占两个字节,汉字占两个字节,一种是一个字母占一个位置,一个汉字也占两

个字节,下面写这两种的代码:
###第一种形式的控制输入的字数代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		textarea{
			width: 400px;
			height:400px;
			resize: none;
		}
		.limit{
			width: 400px;
			text-align: right;
		}
		#d1{
			margin: 100px;
		}
	</style>
</head>
<body>
	<div id = "d1">
		<div>事件描述</div>
		<div>
			<textarea></textarea>
		</div>
		<div class="limit">
			最大可输入
			<span>0</span>/20
		</div>
	</div>
	<script type="text/javascript">
		//先定义计算字符串字数
		function getStrleng(str,max) { 
		    myLen = 0;
		    i = 0;
		    for (; (i < str.length) && (myLen <= max * 2); i++) {
		        if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)           //根据Unicode编码值判断是否汉字
		            myLen++;
		        else
		            myLen += 2;
		    }
		    return myLen;
		}
		//定义函数获得DOM元素
		function Q(s){
			return document.querySelector(s);
		}
		//定义函数显示写了几个字
		function checkWord(c) {
		    var maxstrlen = 20;    
		    var str = c.value;              //对象的内容
		    myLen = getStrleng(str,maxstrlen);   //计算str的字符个数
		    var wck = Q(".limit span");
		    console.log(wck)
		    if(myLen > maxstrlen * 2){
		    	c.value = str.substring(0, i - 1);
		    }else{
		    	wck.innerHTML = Math.floor(myLen / 2);
		    } 
		}
		Q('textarea').onkeyup =function(){
			checkWord(this);
		}
	</script>
</body>
</html>

效果如下:

这里写图片描述

这里写图片描述

###第二种形式的控制输入的字数代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		textarea{
			width: 400px;
			height:400px;
			resize: none;
		}
		.limit{
			width: 400px;
			text-align: right;
		}
		#d1{
			margin: 100px;
		}
	</style>
</head>
<body>
	<div id = "d1">
		<div>事件描述</div>
		<div>
			<textarea></textarea>
		</div>
		<div class="limit">
			最大可输入
			<span>0</span>/20
		</div>
	</div>
	<script type="text/javascript">
		//先定义计算字符串字数
		//定义函数获得DOM元素
		function Q(s){
			return document.querySelector(s);
		}
		function check(c){
			var max = 20;
			var span = Q('.limit span');
			var length = c.value.length;
			if(length <= max){
				span.innerHTML = c.value.length;
			}else{
				c.value = c.value.slice(0,max);
			}
		}
		Q('textarea').onkeyup =function(){
			check(this);
		}
	</script>
</body>
</html>

效果如下:

这里写图片描述

这里写图片描述

哪种形式的都有,我特意看了下新浪微博发微博的字数限制是第一种,不过也看实际的需求,要哪款自己选呗,哈哈!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值