js判断文本框剩余可输入字数的方法

2019-12-13 16:00:50来源:爱站网 阅读 ()

新老客户大回馈,云服务器低至5折

文本框在很多项目开发的时候都需要使用,其实我们程序员可以设置在输入框预设有限的字符数,本文是爱站技术频道小编和大家分享的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>

以上所述就是爱站技术频道小编介绍的js判断文本框剩余可输入字数的方法,大家学习的怎样了?希望小编的介绍可以给大家带来更多灵感。


原文链接:https://js.aizhan.com/develop/JavaScript/10691.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:详解Vue动态添加模板的几种方法

下一篇:详解bootstrap table表格的使用方法