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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
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文件上传简单实现方法
2015/01/24 PHP
php格式化json函数示例代码
2016/05/12 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
javascript设置页面背景色及背景图片的方法
2015/12/29 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
Python实现ssh批量登录并执行命令
2016/10/25 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Django model反向关联名称的方法
2018/12/15 Python
Python3 max()函数基础用法
2019/02/19 Python
Django保护敏感信息的方法示例
2019/05/09 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
用Python开发app后端有优势吗
2020/06/29 Python
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
人事行政主管岗位职责
2013/12/22 职场文书
医院门卫岗位职责
2013/12/30 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python