js判断文本框剩余可输入字数的方法


Posted in Javascript onFebruary 04, 2015

本文实例讲述了js判断文本框剩余可输入字数的方法。分享给大家供大家参考。具体如下:

目的:为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数

JS实现方法

<html>  

<head runat="server">  

    <title></title>  

    <script type="text/javascript">  

   

        var maxstrlen = 160;  

        function Q(s) { return document.getElementById(s); }  

   

        function checkWord(c) {  

            len = maxstrlen;  

            var str = c.value;  

            myLen = getStrleng(str);  

            var wck = Q("wordCheck");  

   

            if (myLen > len * 2) {  

                c.value = str.substring(0, i + 1);  

            }  

            else {  

                wck.innerHTML = Math.floor((len * 2 - myLen) / 2);  

            }  

        }  

   

        function getStrleng(str) {  

            myLen = 0;  

            i = 0;  

            for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {  

                if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)  

                    myLen++;  

                else  

                    myLen += 2;  

            }  

            return myLen;  

        }  

      

    </script>  

</head>  

<body>  

    <form id="form1" runat="server">  

    <div style="font-size: 16px">  

        控制输入框字符输入,计算输入字符总数,显示剩余字数;<br>  

        一个英文字符算一个字符,一个中文字符算两个字符计算。  

    </div>  

    <div>  

        <textarea onkeyup="javascript:checkWord(this);" onmousedown="javascript:checkWord(this);"  

            name="content" style="overflow-y: scroll"></textarea>  

    </div>  

    <div>  

        还可以输入<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">160</span>个字符  

    </div>  

    </form>  

</body>  

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
javascript 兼容各个浏览器的事件
Feb 04 #Javascript
浅谈js中变量初始化
Feb 03 #Javascript
jquery实现submit提交表单
Feb 03 #Javascript
jQuery实现跨域
Feb 03 #Javascript
JavaScript错误处理
Feb 03 #Javascript
js实现右下角提示框的方法
Feb 03 #Javascript
Node.js中child_process实现多进程
Feb 03 #Javascript
You might like
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
详解YII关联查询
2016/01/10 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
php ZipArchive实现多文件打包下载实例
2019/10/31 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
初识SmartJS - AOP三剑客
2014/06/08 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
Node.js编码规范
2014/07/14 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
python定时器(Timer)用法简单实例
2015/06/04 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
ORACLE第二个十问
2013/12/14 面试题
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
十佳班主任事迹材料
2014/01/18 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
2016中秋节问候语
2015/11/11 职场文书