文本框textarea实时提示还可以输入多少文字
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文本框textarea实时提示还可以输入多少文字相关的知识，希望对你有一定的参考价值。
参考技术A 文本框 textarea限制输入文字个数的的javascript代码，我们经常在评论留言页面我们需要在客户端限制访客的留言长度，当然最好我们在服务器端也要加上相应的代码，因为客户端的限制是相对的。本文整理了3种限制输入字符数的方法：
方法一：文本框textarea限制输入文字个数为200个
<h3>设计理念说明（200字以内）</h3>
<textarea onkeyup="checkLen(this)"></textarea>
<div>您还可以输入 <span id="count">200</span> 个文字</div>
<script type="text/javascript">
function checkLen(obj)
var maxChars = 200;//最多字符数
if (obj.value.length > maxChars)
obj.value = obj.value.substring(0,maxChars);
var curr = maxChars - obj.value.length;
document.getElementByIdx_x("count").innerhtml = curr.toString();
</script>
[提示：你可先修改部分代码，再按运行]
方法二：显示已经用字数和剩余字数
<script>
function cal()
if(a.value.length>20)
a.value=a.value.slice(0,20);
b.value=20;
c.value=0;
else
b.value=a.value.length;
c.value=20-eval_r(b.value);
</script>
<textarea id="a" onpropertychange="cal()"></textarea>
已有字数：<input id=b size=5 value="0" disabled>
剩余字数：<input id=c size=5 value="20" disabled><br>
[提示：你可先修改部分代码，再按运行]
方法三：支持双字节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 文本框textarea限制输入文字个数的方法 - 中国asp之家</TITLE>
</HEAD>
<BODY>
<textarea onkeyup="cls(this,50,'v')" oncontextmenu="cls(this,50,'v')"></textarea>
<span id="v"></span>
<script type="text/javascript">
function cls(obj,max,v)
var reg=/[^x00-xff]/gm;
var str=obj.value.replace(reg,'aa');//全换成单字节字符计算
var v=document.getElementByIdx_x('v');
if(str.length>max)
var n=0,strr=[];
for(var i=0;i<obj.value.length;i++)//得到50字节以内的字符
/[^x00-xff]/.test(obj.value.charAt(i))?n+=2:n+=1;
if(n>max)break;
strr.push(obj.value.charAt(i));
obj.value=strr.join('');
v.innerHTML=0;
else
v.innerHTML=max-str.length;
</script>
</BODY>
</HTML>
[提示：你可先修改部分代码，再按运行]
JS-实时修改在textarea里面的span(实际输入的文字)
解决办法：
在开发中，多少会遇到一些界面，输入限制字数。
例如：
//页面加载完毕 $(function() { //descrip是textarea的id $("#descrip").on(‘input‘,function(event) { //实时改变span的数值 descrip_lenth是span $("#descrip_lenth").html($("#descrip").val().length); }); });
以上是关于文本框textarea实时提示还可以输入多少文字的主要内容，如果未能解决你的问题，请参考以下文章
使用ElementUI的@input,@change,@blur,@focus进行校验文本框的长度，提示还可以输入多少字