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 function使用心得
May 10 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 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
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
List Information About the Binary Files Used by an Application
2007/06/11 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
jquery禁用右键示例
2014/04/28 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
Python之py2exe打包工具详解
2017/06/14 Python
详解Python文本操作相关模块
2017/06/22 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
大学毕业自我评价
2014/02/02 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
初中班级口号
2014/06/09 职场文书
英语教师求职信
2014/06/16 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
2014年计生工作总结
2014/11/21 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python