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 相关文章推荐
jquery的ajax异步请求接收返回json数据实例
Jun 16 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
微信小程序媒体组件详解(视频,音乐,图片)
Sep 19 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
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
对javascript和select部件的结合运用
2006/10/09 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
PHP flock 文件锁详细介绍
2012/12/29 PHP
ThinkPHP处理Ajax返回的方法
2014/11/22 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
javascript 图片裁剪技巧解读
2012/11/15 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
js实现div色块碰撞
2020/01/16 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python Tkinter的图片刷新实例
2019/06/14 Python
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
Farfetch澳大利亚官网:Farfetch Australia
2020/04/26 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
护士岗位职责
2014/02/16 职场文书
白岩松演讲
2014/05/21 职场文书
2014年变电站工作总结
2014/12/19 职场文书
冰峪沟导游词
2015/02/09 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
新员工入职感言范文!
2019/07/04 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python