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 相关文章推荐
php 中序列化和json使用介绍
Jul 08 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
详解Document.Cookie
Dec 25 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
JavaScript中重名的函数与对象示例详析
Sep 28 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
js实现随机8位验证码
Jul 24 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 Javascript
Element Input输入框的使用方法
Jul 26 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
利用PHP实现短域名互转
2013/07/05 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
教师年终个人自我评价
2013/10/04 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
运动会演讲稿50字
2014/08/25 职场文书
干部考核工作总结2015
2015/07/24 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
Redis实现订单过期删除的方法步骤
2022/06/05 Redis
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers