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 相关文章推荐
JS刷新当前页面的几种方法总结
Dec 24 Javascript
javascript使用正则表达式检测IP地址
Dec 03 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
js实现菜单跳转效果
Dec 11 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
php如何连接sql server
2015/10/16 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
js实现微博发布小功能
2017/01/12 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Python 3中print函数的使用方法总结
2017/08/08 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
好军嫂事迹材料
2014/01/15 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
企业晚会策划方案
2014/05/29 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
庆元旦活动总结
2014/07/09 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
总经理助理岗位职责
2015/01/31 职场文书
喋血孤城观后感
2015/06/08 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python