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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
JS 显示当前日期与时间的代码
Mar 24 Javascript
基于jQuery的试卷自动排版系统实现代码
Jan 06 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
微信小程序实现多行文字滚动
Nov 18 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
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
javascrip关于继承的小例子
2013/05/10 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
EditPlus 正则表达式 实战(3)
2016/12/15 Javascript
js a标签点击事件
2017/03/30 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
js实现星星打分效果
2020/07/05 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
python进阶教程之异常处理
2014/08/30 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
python检查指定文件是否存在的方法
2015/07/06 Python
Python中的数学运算操作符使用进阶
2016/06/20 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python Celery定时任务的示例
2018/03/13 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
团员学习总结的自我评价范文
2013/10/14 职场文书
蔬菜基地的创业计划书
2014/01/06 职场文书
小学中秋节活动方案
2014/02/06 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle