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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
JQuery Tab选项卡效果代码改进版
2010/04/01 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
2018/10/12 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python get获取页面cookie代码实例
2018/09/12 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python 实现微信自动回复的方法
2020/09/11 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
美国眼镜网:GlassesUSA
2017/09/07 全球购物
西班牙英格列斯百货英国官网:El Corte Inglés英国
2017/10/30 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
海南地接欢迎词
2014/01/14 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
六年级学生评语
2014/04/22 职场文书
新教师培训心得体会
2014/09/02 职场文书
庆元旦演讲稿
2014/09/15 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis