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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
js中Object.create实例用法详解
Oct 05 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
c#中的实现php中的preg_replace
2009/12/21 PHP
php之XML转数组函数的详解
2013/06/07 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
php中static和const关键字用法分析
2016/12/07 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
校领导推荐信
2013/11/01 职场文书
公司年会抽奖活动主持词
2014/03/31 职场文书
《白鹅》教学反思
2014/04/13 职场文书
村委会贫困证明范文
2014/09/21 职场文书
语文教师个人工作总结
2015/02/06 职场文书
离婚纠纷代理词
2015/05/23 职场文书