您现在的位置是:首页 > 正文

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

2024-02-29 10:46:31阅读 2

需求

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

分析

首先,用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>

以上

网站文章

  • 不写代码如果解决Jmeter跨线程组取参数值问题?

    不写代码如果解决Jmeter跨线程组取参数值问题?

    如果你工作中已经在用jmeter做接口测试,或性能测试了,你可能会遇到一个麻烦。那就是jmeter的变量值不能跨线程组传递。这个不是jmeter的缺陷,这是jmeter的设计使然的。如果变量在开始测试...

    2024-02-29 10:46:23
  • Android Fragment 真正的完全解析(上)

    Android Fragment 真正的完全解析(上)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/37970961自从Fragment出现,曾经有段时间,感觉大家谈什么都能跟Fragment谈上关系,做什么都要问下Fragment能实现不~~~哈哈,是不是有点过~~~本篇博客力求为大家说明Fragment如何产生,什么是Fragment,Fragment生命周期,

    2024-02-29 10:46:12
  • flink的timeWindowAll流无法输出数据

    //不设置这个会导致无数据输出 environment.setStreamTimeCharacteristic(TimeCharacteristic.ProcessingTime);

    2024-02-29 10:45:42
  • 【20211208】【Python】UCI数据集的简单介绍和使用Python保存UCI数据集为.mat文件

    【20211208】【Python】UCI数据集的简单介绍和使用Python保存UCI数据集为.mat文件

    一、UCI 数据集介绍进行机器学习学习过程中,会使用到 UCI 公开数据集,UCI 数据集网址:UCI Machine Learning Repository。点击进入之后,页面显示如下:以 iris 数据集为例,点击进入:该页面展示了该数据集的相关信息,包括:数据及相关介绍、相关任务、样本个数、特征个数、是否有缺失值等。常见数据集及其样本个数、特征个数总结:更为详细的数据集介...

    2024-02-29 10:45:35
  • k210学习:矩形识别,激光识别,与stm32通信

    k210学习:矩形识别,激光识别,与stm32通信

    k210学习:矩形识别,激光识别,与stm32通信

    2024-02-29 10:45:28
  • windows文件远程传输

    import os import shutil import re def repalce_drive(path,virtual_drive): # 把盘符替换为虚拟盘符 res = re.match...

    2024-02-29 10:44:59
  • Kotlin笔记——常用注解

    @Nullable和@NotNull 以检查给定变量、参数或返回值的 null 性。@Nullable注解用于指明可以为 null 的变量、参数或返回值,而@NonNull则用于指明不可以为 null...

    2024-02-29 10:44:51
  • LVS负载均衡之--DR模式

    LVS负载均衡之--DR模式

    前言:上一章和拐友们讲解了LVS虚拟服务器的NAT模式,这章讲解LVS中的负载均衡中的DR模式目录一.LVS-DR工作原理1.1数据包流向分析1.2DR模式的特点二.ARP的问题2.1问题冲突2.1....

    2024-02-29 10:44:42
  • 【转】“从客户端(ctl00$Content$txtContent)中检测到有潜在危险的 Request.Form 值”之解...

    【转】“从客户端(ctl00$Content$txtContent)中检测到有潜在危险的 Request.Form 值”之解...

    转载自 sucheng1031 最终编辑 hybingo “/WebSite”应用程序中的服务器错误。从客户端(ctl00$Content$txtContent=&quot;木木木木木木木 &quot;)中检测到有潜在危险的 Request.Form 值。说明: 请求验证过程检测到有潜在危险的客户端输入值,对请求的处理已经中止。该值可能指示存在危及应用程序安全的尝试,如跨...

    2024-02-29 10:44:13
  • 闲来无事

    突然想说、喜欢安姐、????、优秀的那么自然、还有那么许多一直优秀的人、读读你们的故事、思考下自己的人生、是啊、对错并不重要、关键是成长和思考希望所有人都能按照自己的意愿过一生------- 杂谈 -...

    2024-02-29 10:44:05