指引网

当前位置: 主页 > 网页制作 > JavaScript >

Javascript限制textarea文本框的文字长度代码

来源:网络 作者:佚名 点击: 时间:2017-07-02 09:20
[摘要]  Javascript限制textarea文本框的文字长度代码用两个例子来告诉大家如何实现我们要的功能,下面一起来看看例子,希望对各位有帮助。

现在发微博,那个文本框一般只能输入200字好像,再多就会自动删除,要么是提示字数受限,用Js就可实现本功能。今天带来的这个Js限制表单文本框文字数量的例子,相信有此方面需要的是个不错的参考。为了便于使用,这里把代码拆分为HTML表单部分和JavaScript代码部分:
HTML表单部分,代码如下:

 代码如下 复制代码

<form name=myform action="">
<textarea name="message" wrap="physical" cols="28" rows="4" onKeyDown="textCounter(this.form.message,this.form.remLen,125);" onKeyUp="textCounter(this.form.message,this.form.remLen,125);"></textarea>
<br>
您还可以输入<input readonly type="text" name="remLen" size="4" maxlength="3" value="125">个字符</div>
</form>

JavaScript代码部分:

 代码如下 复制代码

<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>

注:两段代码可复制到同一页面中。

再看一个例子

 代码如下 复制代码

<SCRIPT language="javascript">
<!--
function checktext(text)
{
    allValid = true;
    for (i = 0;  i < text.length;  i++)
    {
      if (text.charAt(i) != " ")
      {
        allValid = false;
        break;
      }
    }
return allValid;
}

function gbcount(message,total,used,remain)
{
  var max;
  max = total.value;
  if (message.value.length > max) {
  message.value = message.value.substring(0,max);
  used.value = max;
  remain.value = 0;
  alert("留言不能超过 200 个字!");
  }
  else {
  used.value = message.value.length;
  remain.value = max - used.value;
  }
}

-->
</script>

<style type="text/css">
<!--
* {padding:0; margin:0;}
body, html {text-align:left; font-size:12px; line-height:150%; margin:0 auto; background:#fff; padding-top:20px;}
fieldset {padding:10px; width:550px; margin:0 auto;}
legend {font-size:14px; font-weight:bold;}
.inputtext {border:none; background:#fff;}
-->
</style>

<form action="SaveData.asp" method="post" onSubmit="return datacheck();">
<fieldset><legend>请输入内容</legend>
<textarea name="Memo" rows="10" wrap=PHYSICAL cols="75" onKeyDown="gbcount(this.form.Memo,this.form.total,this.form.used,this.form.remain);" onKeyUp="gbcount(this.form.Memo,this.form.total,this.form.used,this.form.remain);"></textarea>
<p>最多字数:
<input disabled maxLength="4" name="total" size="3" value="200" class="inputtext">
已用字数:
<input disabled maxLength="4" name="used" size="3" value="0" class="inputtext">
剩余字数:
<input disabled maxLength="4" name="remain" size="3" value="200" class="inputtext"></td>
</p>
</fieldset>
</form>


其实这样的原理很简单我们只是在input中加上了一个onKeyUp事件了,当用户按下空格时就自动判断字符是不是超过了指定长度然后进行判断了哦。

------分隔线----------------------------