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 相关文章推荐
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
详解JavaScript编程中的数组结构
Oct 24 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
javascript中的this作用域详解
Jul 15 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 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实现的pdo公共类定义与用法示例
2017/07/19 PHP
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
js函数调用的方式
2014/05/06 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
js实现随机点名小功能
2017/08/17 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
Python中bisect的用法
2014/09/23 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
深入浅出学习python装饰器
2017/09/29 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
Python语言快速上手学习方法
2018/12/14 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
对python中的装包与解包实例详解
2019/08/24 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
护士自荐信范文
2013/12/15 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
公安个人四风问题对照检查及整改措施
2014/10/28 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
Python读取和写入Excel数据
2022/04/20 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL