textarea文本框内容字数显示

最新推荐文章于 2021-12-03 16:43:46 发布

愿爱有来生

最新推荐文章于 2021-12-03 16:43:46 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/sphinxylj/article/details/83837373

js 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现HTML文本框输入字数限制的方法。通过监听文本框的键盘输入事件，实时更新剩余可输入字数，并在达到最大限制时阻止额外输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不考虑中文，中文当作一个字符来处理。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
//验证内容字数
function keyUp(){
var brief = document.form1.brief;
if ( 9 >= brief.value.length >= 1 ){
var nn = "0" + brief.value.length;
}else{
var nn = brief.value.length;
}

var num = document.getElementById('num');
var numsh = document.getElementById('numShYu');
if (parseInt(brief.value.length) >= 200){
alert("内容已达到最大字数，不能再输入！");
brief.value = brief.value.substring(0,200);
num.innerHTML = "200";
numsh.innerHTML = "0";
return false;
}
num.innerHTML = nn;
numsh.innerHTML = 200 - parseInt(brief.value.length);
}

</script>
</HEAD>

<BODY>
<form name=form1>
<div align="left">
<textarea onkeyup="keyUp();" name="brief" cols="90" rows="5" id="brief" style="width:366px;" ></textarea>
<font size=2>
(当前
<font color="#FF0000">
<span id='num'>0</span>
</font>
字,剩余
<font color="#FF0000">
<span id='numShYu'>200</span>
</font>
字)
</font>
</div>
</form>
</BODY>
</HTML>