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面向对象 理解javascript对象
Jan 04 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
jQuery $.each遍历对象、数组用法实例
2015/04/16 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
JS作为值的函数用法示例
2016/06/20 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
高中军训感言500字
2014/02/24 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
出纳岗位职责
2015/01/31 职场文书
2016年教师节感言
2015/12/09 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
MySQL事务的隔离级别详情
2022/07/15 MySQL