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中实现暂停的几篇文章
Mar 04 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 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 foreach 使用&amp;(与运算符)引用赋值要注意的问题
2010/02/16 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
javascript 命名空间以提高代码重用性
2008/11/13 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
2018/03/06 Javascript
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python selenium自动化测试模型图解
2020/04/15 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
床上用品全球在线购物:BeddingInn
2016/12/18 全球购物
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
学习交流会主持词
2014/04/01 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
Python爬取某拍短视频
2021/06/11 Python
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL