通过js控制输入的字数

最新推荐文章于 2024-07-15 18:16:26 发布

炸_洋芋

最新推荐文章于 2024-07-15 18:16:26 发布

阅读量3k

点赞数

分类专栏： JavaScript 文章标签： javascript js控制字数 textarea字数字数限制

本文链接：https://blog.csdn.net/zhaoxiang66/article/details/77369450

版权

JavaScript 专栏收录该内容

24 篇文章 4 订阅

订阅专栏

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

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

<!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>