首页 > 代码库 > html输入框输入显示剩余字数
html输入框输入显示剩余字数
效果图
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE></TITLE>
<LINK href="http://www.mamicode.com/css/User_Login.css" type=text/css rel=stylesheet>
<META http-equiv=Content-Type content="textml; charset=utf-8">
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.7.2.min.js"></script>
</HEAD>
<script type="text/javascript">
$().ready(function(){
var ty = document.getElementById("cty");
var motto=document.getElementById("motto");
var curLen=document.getElementById("curLen");
var maxLen=document.getElementById("maxLen");
var leftLen=document.getElementById("leftLen");
motto.onkeyup= function () {
maxLength = parseInt(maxLen.firstChild.nodeValue);
this.value = http://www.mamicode.com/this.value.substr(0,maxLength);
var len = this.value.length;
curLen.firstChild.nodeValue = http://www.mamicode.com/len;
leftLen.firstChild.nodeValue = http://www.mamicode.com/maxLength-len;
};
//shade(ty);
});
</script>
<BODY>
<label>
<textarea name="motto" id="motto"></textarea>
<br/>
<em>
<span id="curLen">0</span>/<span id="maxLen">200</span>字， 还能输入<span id="leftLen">200</span>字！
</em>
</label>
</BODY>
</HTML>
html输入框输入显示剩余字数