实时监控文本框输入字数

需求：实时监控文本输入框的字数，并加以限制
1、实时监控当前输入字数，直接使用onkeyup事件方法，给输入框加maxlength属性限制长度。如：

    <div><textarea id="txt" maxlength="10"></textarea><p><span id="txtNum">0</span>/10</p></div>

    var txt = document.getElementById("txt");var txtNum = document.getElementById("txtNum");txt.addEventListener("keyup", function(){txtNum.textContent = txt.value.length;})

此时已可以完成基本的监控功能，存在的问题：当输入英文时正常，但输入中文时，监控的数字会随拼音长度而变化。
2、解决方法：
compositionstart 事件触发于一段文字的输入之前（类似于 keydown 事件，但是该事件仅在若干可见字符的输入之前，而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）。
compositionend 就是对应的就是一段文字输入的事件。
这两个属性有点类似于“开关”，如：开始进行中文输入的拼音时开关打开，不在改变监测得到的长度数值，完整输入一个或是一串文字后，开关关闭，得到监测的数值长度。

    var txt = document.getElementById("txt");var txtNum = document.getElementById("txtNum");var sw = false;      //定义关闭的开关txt.addEventListener("keyup", function(){if(sw == false){countTxt();}});txt.addEventListener("compositionstart", function(){sw = true;});txt.addEventListener("compositionend", function(){sw = false;countTxt();});function countTxt(){       //计数函数if(sw == false){        //只有开关关闭时，才赋值txtNum.textContent = txt.value.length;}}

在vue中的写法：
template:

<textarea name="suggestions-text" id="textarea" cols="30" rows="10" maxlength="300" v-on:keyup="write()" v-on:compositionstart="importStart()" v-on:compositionend="importEnd()" v-model="textContent"></textarea>
<p class="counterNum">{{conterNum}}/300</p>

data:

textContent: '',
conterNum: 0,
chnIpt: false,

methods:

write() {let self = this;if (self.chnIpt == false) {self.conterNum = self.textContent.length;}
},
importStart() {this.chnIpt = true;
},
importEnd() {this.chnIpt = false;this.write();
}

作者：rookie.he（kuke_kuke）
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！

实时监控文本框输入字数相关推荐

Axure 文本框输入字数限制
效果如下图: 步骤: 1.文本域准备工作: 2.计数器准备工作: 3.交互工作: ①.选中文本域点击新建交互 ②.选择文本发生改变时 ③. 设置计数器函数 ④.设置文本域函数欢迎互相学习交流微信 ...
实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
简单的文本框输入实时计数
2019独角兽企业重金招聘Python工程师标准>>> 简单的文本框输入实时计数 $(function(){suminput('idea','60');})//记录输入字符方法fun ...
监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
文本框输入还剩多少字数统计代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
java 限制文本框长度_java中限制文本框输入长度的显示（转载）
我最近在网上看到一篇文章很不错,对于限制文本框输入长度的显示很方便 JAVA不像C#能够有maxLength这个属性对文本框的输入长度进行控制,但也是有办法实现相应的功能的. 写一个MyDocumen ...
[正则表达式]文本框输入内容控制
整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$ 只能输入数字:"^[0-9]*$". 只能输入n位的数字:"^\d{n}$". 只能输入至少n ...
html ip输入框效果,html5 input文本框输入动画特效
特效描述:文本框输入动画动画特效.几个更鼓舞人心的风格为文本框输入动画包括一些新技术和新思想. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Manami Username Web ...
Java集合框架上机练习题：用户分别从两个文本框输入学生的姓名和分数.............
编写一个应用程序,用户分别从两个文本框输入学生的姓名和分数,程序按成绩排序将这些学生的姓名和分数显示在一个文本区中. import java.awt.FlowLayout; import java.a ...

实时监控文本框输入字数

实时监控文本框输入字数相关推荐

最新文章

热门文章