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 数组的 uniq 方法
Jan 23 Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
解决axios post 后端无法接收数据的问题
Oct 29 Javascript
JavaScript组合设计模式--改进引入案例分析
May 23 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教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
2012/05/23 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
微信小程序在ios下Echarts图表不能滑动的问题解决
2019/07/10 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
python开启多个子进程并行运行的方法
2015/04/18 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
在pycharm中显示python画的图方法
2019/08/31 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
python利用faker库批量生成测试数据
2020/10/15 Python
python 爬虫请求模块requests详解
2020/12/04 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
自我评价如何写好?
2014/01/05 职场文书
热血教师观后感
2015/06/10 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
Python进程池与进程锁之语法学习
2022/04/11 Python