js实时监控文本框输入字数的实例代码


Posted in Javascript onJanuary 18, 2018

需求:实时监控文本输入框的字数,并加以限制

js实时监控文本框输入字数的实例代码

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();
}

以上这篇实时监控文本框输入字数的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js生成的验证码的实现与技术分析
Sep 17 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
浅谈React Native Flexbox布局(小结)
Jan 08 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
Jan 20 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
js DOM的事件常见操作实例详解
Dec 16 Javascript
JS实现图片切换特效
Dec 23 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 #Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 #Javascript
分享ES6的7个实用技巧
Jan 18 #Javascript
vue 动态修改a标签的样式的方法
Jan 18 #Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 #Javascript
Nuxt.js踩坑总结分享
Jan 18 #Javascript
Nuxt.js实战详解
Jan 18 #Javascript
You might like
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
请离开include_once和require_once
2013/07/18 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
Python常用小技巧总结
2015/06/01 Python
Python实现的双色球生成功能示例
2017/12/18 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
如何教少儿学习Python编程
2020/07/10 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
缓刑人员的思想汇报
2014/01/11 职场文书
营销学习心得体会
2014/09/12 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
公司职员入党自传书
2015/06/26 职场文书