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模拟弹出效果代码修正版
Aug 07 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
js浏览器html5表单验证
Oct 17 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
JS常见内存泄漏及解决方案解析
May 30 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中最容易忘记的一些知识点总结
2013/04/28 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
长青弘远的面试题
2012/06/09 面试题
厨师长岗位职责
2014/03/02 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
护士找工作求职信
2014/07/02 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
教师思想工作总结2015
2015/05/13 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
MySQL 数据恢复的多种方法汇总
2021/06/21 MySQL