js判断文本框剩余可输入字数的方法
2019-12-13 16:00:50来源:爱站网 阅读 ()
文本框在很多项目开发的时候都需要使用,其实我们程序员可以设置在输入框预设有限的字符数,本文是爱站技术频道小编和大家分享的js判断文本框剩余可输入字数的方法。
目的:为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数
JS实现方法
?
<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>
以上所述就是爱站技术频道小编介绍的js判断文本框剩余可输入字数的方法,大家学习的怎样了?希望小编的介绍可以给大家带来更多灵感。
原文链接:https://js.aizhan.com/develop/JavaScript/10691.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript特殊文本输入框网页特效 2020-03-16
- JS判断浏览器是否安装flash插件的简单方法 2020-03-12
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
- js判断客户端是iOS还是Android等移动终端的方法 2020-02-25
- vue路由跳转时判断用户是否登录功能的实现 2020-01-17
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash