文本输入框，限制输入字数

最新推荐文章于 2021-12-21 10:18:04 发布

Fasure_Smile

最新推荐文章于 2021-12-21 10:18:04 发布

阅读量7.1k

点赞数

分类专栏：前端文章标签：文本输入框限制字数

本文链接：https://blog.csdn.net/Fasure_Smile/article/details/50516394

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

个人学习笔记，文本输入框，限制输入字数

一：文本输入框，限制输入字数，汉字两个字符，其他数字，符号，字母，回车，空格等一个字符

<html>
<div id="updateDiv" class="display_none">
                <textarea id="updateInput" class="updateInput" style="height:300px;width:300px" onkeyup="javascript:checkWord(this);" onmousedown="javascript:checkWord(this);" placeholder="请输入您的申请理由(255字以内)"></textarea></br>

                <div style="margin-left: 510px;">还可以输入<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">20</span>个字 </div>

            </div>
</html>
<script>
    function Q(s) { return document.getElementById(s); }  

function checkWord(c) {
    var maxstrlen = 20;    
    len = maxstrlen;
    var str = c.value;              //对象的内容
    myLen = getStrleng(str);   //计算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);    //Math.floor(x),返回值：小于等于 x，且与 x 最接近的整数
    }                                                                                       //但是Math.floor((5 * 2 - 1) / 2)=4
}

function getStrleng(str) {
    var maxstrlen = 20;  
    myLen = 0;
    i = 0;
    for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {
        if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)           //根据Unicode编码值判断是否汉字
            myLen++;
        else
            myLen += 2;
    }
    return myLen;
}
</script>

这里写图片描述
放到项目中用的时候只需要改动椭圆中函数名字和方框中限制的数字即可

二：限制输入内容的个数，数字，字母，符号，空格，回车等都记为1

<html>  
   <head>  
   <title>JS限制Textarea文本域字符个数</title>  
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
   <SCRIPT LANGUAGE="JavaScript">  
   <!--//  
   function textCounter(field, countfield, maxlimit) {  
   // 函数，3个参数，表单名字，表单域元素名，限制字符；  
   if (field.value.length > maxlimit)  
   //如果元素区字符数大于最大字符数，按照最大字符数截断；  
   field.value = field.value.substring(0, maxlimit);  
   else  
   //在记数区文本框内显示剩余的字符数；  
   countfield.value = maxlimit - field.value.length;  

   }  
   //-->  
   </SCRIPT>  
   </head>  
   <body>  
    <form name=myform action="">  
        <textarea name="message" cols="28" rows="5" onKeyDown="textCounter(message,remLen,6);" onKeyUp="textCounter(message,remLen,6);"></textarea>  
        您还可以输入:<input name="remLen" type="text" value="6" size="5" readonly="readonly">个字符  
    </form>  
   </body>  
   </html>

Fasure_Smile

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文本输入框，限制输入字数

个人学习笔记，文本输入框，限制输入字数一：文本输入框，限制输入字数，汉字两个字符，其他数字，符号，字母，回车，空格等一个字符<html><div id="updateDiv" class="display_none"> <textarea id="updateInput" class="updateInput" style="height:300px;width:3
复制链接

扫一扫