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 相关文章推荐
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Vue中使用vux的配置详解
May 05 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
2012/07/31 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
使用Python压缩和解压缩zip文件的教程
2015/05/06 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python检查ping终端的方法
2019/01/26 Python
python实现自动化上线脚本的示例
2019/07/01 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
服装设计专业求职信
2014/06/16 职场文书
Java spring定时任务详解
2021/10/05 Java/Android