输入框连续删除，光标闪烁问题

原创已于 2024-07-17 18:37:44 修改 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

于 2022-09-09 16:23:06 首次发布

uni-app 专栏收录该内容

4 篇文章

订阅专栏

该博客主要探讨了如何在前端实现表单输入的限制，包括禁止输入表情和特殊字符，以及限制输入长度。通过使用正则表达式进行匹配和替换，实现了实时的输入检查，并通过防抖函数优化了性能，提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <textarea @input="check_input" :value="refundReason" maxlength="100" placeholder='填写备注信息，100字以内' class='num' name="refund_reason_wap_explain" ></textarea>


                refundReason:'',			
                check_input_length:0,
				refundReasontwo:'',
				check_input_str_value:'',

// 添加删除正常字符的防抖函数
				check_input_jian(){
					this.refundReason=this.refundReasontwo
				},
				// 禁止输入表情-去除表情
				check_input_str1(){
					var regRule =
						/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;;
					
					this.refundReason= this.check_input_str_value
					let strvalue = this.check_input_str_value.replaceAll(regRule, '')
					var regStr2 = /[`~!@#$%^&*()+=|{}\[\]<>/~]/ig;
					if (regStr2.test(strvalue)) {
						strvalue = strvalue.replaceAll(regStr2, '')
						}
					this.$nextTick(() => {
						this.refundReason = strvalue;
						this.check_input_length=strvalue.length;
						this.$util.Tips({
							title: "请勿使用表情符号" // 请勿使用表情符号
						});
					})
				},
				// 禁止输入特殊字符-去除特殊字符
				check_input_str2(){
						this.refundReason= this.check_input_str_value;
						var regStr2 = /[`~!@#$%^&*()+=|{}\[\]<>/~]/ig;
						let strvalue = this.check_input_str_value.replaceAll(regStr2, '')
						var regRule =
							/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;;
						if (regRule.test(strvalue)){
							strvalue = strvalue.replaceAll(regRule, '')
						}
						this.$nextTick(() => {
							this.refundReason = strvalue;
							this.check_input_length=strvalue.length; 
							this.$util.Tips({
								title: "不能输入特殊字符" // 不能输入特殊字符
							});
						})
					
				},
				check_input(e) {
					if(this.check_input_length<e.detail.value.length){
						this.refundReasontwo = e.detail.value
						this.check_input_length=e.detail.value.length
						let value = e.detail.value
						this.check_input_str_value=value
						var regRule =
							/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;;
						if (regRule.test(value)) {
							uni.$u.debounce(this.check_input_str1, 300);
						}else {
							var regStr2 = /[`~!@#$%^&*()+=|{}\[\]<>/~]/;
							if (regStr2.test(value)) {
								uni.$u.debounce(this.check_input_str2, 300)//uniapp插件的防抖函数
							}else{
								uni.$u.debounce(this.check_input_jian, 700)	
							}
							
						}
					}else{
						this.refundReasontwo = e.detail.value;
						this.check_input_length=e.detail.value.length;
						uni.$u.debounce(this.check_input_jian, 700)
						
					}
				}