原生 input输入框，按字符or字节数计算输入内容长度，超出部分截取掉。

最新推荐文章于 2023-05-24 14:59:19 发布

oduoke~~

最新推荐文章于 2023-05-24 14:59:19 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/xh1506101064/article/details/122239695

版权

需求

这做的是一个原生输入框，按字节或者字符数计算内容长度，超出部分截取掉。

分析

首先，用maxlength肯定是不行的，因为，aaa的长度为3，啊啊啊的字节长度肯定是大于3的,但是maxlength还是将他计算为3,跟我们的需求不太一样。所以计算一下。

首先计算输入内容的长度，需要在输入时就开始计算，就需要我们在onchange的时候对输入内容长度进行判断，这里又涉及到一个问题。就是中文在输入时，还没有组合完就会被拿去计算，所以这里针对中文还是要用单独的事件做处理。

话不多说，上代码，引入
JQ，复制粘贴可以直接使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
  html {
    height: 100%
  }
/* 设置背景颜色 */
  body {
    margin: 0;
    height: 100%;
    background: #fff;
  }

  </style>
</head>
<script type="text/javascript" src="./jquery.js"></script>
<body>
  <input type="text" style="width: 500px;"  placeholder="例：输入内容"  autocomplete="off" maxlength="253" name="ping" id="input_id" />

  <script>
  	//定义一个标志位
    var flag = false;
	$(document).ready(function(){
		$('#input_id').on({
			//输入中文组合时，flag设置为true
			'compositionstart':function(){
				flag = true
			},
			//输入中文结束时，将flag置为false
			'compositionend':function(){
				flag = false;
				//flag为false代表中文输入组合结束，就可以进行字符长度的计算了
				if(!flag) {
					var value = $(this)[0].value
					//checkValue为计算字符长度的方法，超过规定字符长度则截取
					let checkResult = checkValue(value)
					// console.log(checkResult)
				}
			},
			//正常的内改变时触发的事件，但这里加了flag开关，当flag为true时，中文输入还在进行中，此时不进行字符长度计算
			'input propertychange':function(){
				if(!flag) {
					var value = $(this)[0].value
					let checkResult = checkValue(value)
					// console.log(checkResult)
				}
			}
		})
	});
	//计算字符长度,超过部分截取掉，textVal为输入内容
	function checkValue(textVal){
		//computedSize为计算字符长度的方法，下面有些，这里定义的最大字符长度为60。可以按照具体情况自由设置
		//reslut为计算之后的结果，具体参数看computedSize方法
		let reslut = this.computedSize(textVal,60)
		console.log(reslut)
		if(reslut.over){
			 //将超过部分截取之后赋值给输入框
			 let value = textVal.substr(0,reslut.posistion)
			 $('#input_id')[0].value = value
		}
	}
	function computedSize(str,maxlength){
		var charcode,total = 0;
		//循环输入的每一个字符,并计算总长度,这里是按照utf-8的方式计算的，有其他就算方式可以不用这个
		for (var i = 0 ; i < str.length; i++){
			charcode = str.charCodeAt(i);
			if (charcode >= 0xd800 && charcode <= 0xdbff) {
				charcode = charcode + str.charCodeAt(++i);
			}
			if (charcode <= 0x007f) {
				total += 1;
			} else if (charcode <= 0x07ff) {
				total += 2;
			} else if (charcode <= 0xffff) {
				total += 3;
			} else {
				total += 4;
			}
			//每次循环都对总长度做一个判断，看其是否超过定义的总长度
			console.log(total);
			if(total>maxlength){
				let data = {
					over:true,//是否超过，true表示超过，false表示没有超过
					posistion:i-1//超过总超度的前一位字符的位置，不能用当前的因为当前已超过
				}
				return data
			}
		}
		let data = {
			over:false,//是否超过，true表示超过，false表示没有超过
			posistion:0//此时不需要返回posistion，因为没有超过不需要进行截取，但是我这还是返回了
		}
		return data;
	}
  </script>
</body>

</html>