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 相关文章推荐
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
react路由配置方式详解
Aug 07 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
Mar 09 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
php实现算术验证码功能
2018/12/05 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
pytorch神经网络之卷积层与全连接层参数的设置方法
2019/08/18 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Python实现FLV视频拼接功能
2020/01/21 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
电工技术比武方案
2014/05/11 职场文书
中学清明节活动总结
2014/07/04 职场文书
退休教师追悼词
2015/06/23 职场文书
2016年读书月活动总结范文
2016/04/06 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server