显示文本框还可以输入多少字数

来源:互联网 发布:个人淘宝企业店铺入口 编辑:程序博客网 时间:2024/04/27 10:36

代码相似,只是表现形式略微有点差异。

第一种,未输入的时候,隐藏了 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language='javascript'>
<!--code written by Ridincal
var charNum = 0;
function changeInfo()
{
charNum = document.all.ipt.value.length;
var maxLength = document.all.ipt.maxLength;
if(maxLength>=charNum)document.all.info.innerHTML="最多发送20字,剩余"+(20-charNum)+"字。";
}
//-->
</script>
</head>

<body>
<input type="text" id="ipt" onkeyup="changeInfo()" maxlength="20"><span id="info">最多发送20字</span>
</body>
</html>

第二种  直接显示剩余的字数

<html>
<meta charset="gb2312">
<head>
<script language="javascript">
maxLen = 100;
function checkMaxInput(form) { 
if (form.message.value.length > maxLen){
form.message.value = form.message.value.substring(0, maxLen);
} else {
form.remLen.value = maxLen - form.message.value.length;
}
}
</script>
</head>
<body>
<form name=myform>
<font size="2" color="red"> ( 你最多可以输入100个字 ) </font><br>
<textarea name=message wrap=physical cols=28 rows=4 onKeyDown="checkMaxInput(this.form)"></textarea>
<br>
<font size="2">还可输入字数:</font>
<input type=text name=remLen size=2 maxlength=3 value="100" readonly>
</form>
</body>
</html>

原创粉丝点击