html input怎么限制字数,搞了个输入框限制字数

news/2024/11/29 7:47:11/

结合蚂蚁设计的Antv(类型ElementUi框架)

html部分:

还可输入{{remnant}}个字。

data.return部分:

data(){

return{

val:'',

val2:'',

val3:'',

maxLength:800,

autoFocus:true,

retPras: {

rules: [

{

required: true,

message: '请输入问题描述信息!'

},

{

validator: this.validateRetPras

}]

},

}

}

data.computed部分:

computed: {

remnant() {

return this.maxLength - this.val.length;

},

},

data.methods部分:

methods: {

countFont(){

this.maxLength=this.maxLength-20

},

validateRetPras(rule, value, callback) {

value=value.replace(/[\r\n\]/g,'')

if(value&&new RegExp(/^.{0,800}$/).test(value)){

this.val=value,

callback()

}else{

callback('请输入有效长度内字数的文字')

}},

基本上就这些吧,over!!


http://www.ppmy.cn/news/957373.html

相关文章

textarea输入框的字数限制与输入字数显示

html <div class"form_message1"><textarea class"form_control form_message2" type"text" name"message" maxlength"254" placeholder"请输入您的留言"></textarea><p class"font_n…

微信小程序文本框限制输入字数

效果图 wxml代码 <view style"border: 1px solid #FFA6A6; border-radius: 10px;"><textarea placeholder-class"place-holder" placeholder"请从以下四个方面填写求求职简介 1. 教育背景介绍&#xff0c;如学校专业描述、个人学习成绩奖学…

表单输入限制字数

1.表单输入限制字节&#xff0c;一个汉字2个字节 //获取字符串的字节长度 function len(s) { s String(s); return s.length (s.match(/[^\x00-\xff]/g) || "").length;// 加上匹配到的全角字符长度 } function limit(obj, limit) { var val obj.value; if (len(v…

输入框字数限制

一般在前台页面会对文本框的字数要做限制&#xff0c;一种方法是提示超出多少个字&#xff0c;不让保存对文本&#xff1b;还有一种是自动截取&#xff0c;但是自动截取对于键盘操作是没有问题的&#xff0c;对于鼠标的复制粘帖会有一些问题。下面看下代码&#xff1a; <scr…

Prompt 技巧指南-让 ChatGPT 回答准确十倍!

出品人&#xff1a;Towhee 技术团队 作者&#xff1a;张晨 随着 ChatGPT 等大型语言模型 (LLM)的兴起&#xff0c;人们慢慢发现&#xff0c;怎么样向 LLM 提问、以什么技巧提问&#xff0c;是获得更加准确的回答的关键&#xff0c;也由此产生了提示工程这个全新的领域。 提示工…

关于输入框限制字数输入问题

在输入框输入内容&#xff0c;当需要限制字数的时候&#xff0c;如果是Input或者textarea&#xff0c;可以直接用maxlength进行字数的限制。如果是用div(添加了contenteditable属性)&#xff0c;如果直接用input事件进行字数的限制&#xff0c;则会出现临界问题。 问题起源&…

“深入解析Spring Boot:快速开发Java应用的利器“

标题&#xff1a;深入解析Spring Boot&#xff1a;快速开发Java应用的利器 摘要&#xff1a;Spring Boot是一个开发Java应用的利器&#xff0c;它简化了Spring应用的配置和部署过程&#xff0c;提供了快速构建和开发Java应用的能力。本文将深入解析Spring Boot的核心特性和优势…

Linux基础内容(26)—— 线程的互斥

Linux基础内容&#xff08;25&#xff09;—— 线程控制和线程结构_哈里沃克的博客-CSDN博客https://blog.csdn.net/m0_63488627/article/details/131372872?spm1001.2014.3001.5501 目录 1.线程互斥 1.问题引入 2.问题原因 3.安全问题 互斥 加锁 加锁后的特点 如何理…