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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
JavaScript Promise 用法
Jun 14 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
iview table render集成switch开关的实例
Mar 14 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
javascript运行机制之执行顺序理解
Aug 03 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中的正规表达式(二)
2006/10/09 PHP
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
实现php加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JavaScript判断变量是否为数组的方法(Array)
2016/02/24 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
python 编写简单网页服务器的实例
2018/06/01 Python
flask框架视图函数用法示例
2018/07/19 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
python爬虫中的url下载器用法详解
2020/11/30 Python
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
试用期自我鉴定范文
2014/03/20 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
乡镇党委书记个人整改措施
2014/09/15 职场文书
师德师风事迹材料
2014/12/20 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
信用卡收入证明范本
2015/06/12 职场文书
工作计划范文之财务管理
2019/08/09 职场文书