第一次写js代码，求助

guard_of_soul 2012-11-12 08:54:26

初接触js。想实现一个简单功能（ps，还没想jquery。。）：当textarea获得焦点，在div（id=“d”）显示当前输入字数，当textarea失去焦点，隐藏
但是，获得焦点时，div木有显示显示想要的文本。。。



<head>

 <title>--!</title>

 <script type="text/javascript">

 /*

 *当textarea获得焦点，显示当前输入字数

 *当textarea失去焦点，隐藏

 */





 //获得焦点，显示

 function show_count(){

  var mydiv = document.getElementById("d");

  var max = 90;

  var count = document.getElementById("area1").value.length;

  if(mydiv.value ==""||mydiv.value ==undefined)

   mydiv.innerHtml =count +"/" + max;

  mydiv.style.display = "block";

 }



 //失去焦点，隐藏

 function hidden_count(){

  document.getElementById("d").style.display = "none";

 }



 //textarea域改变，改变div文本

 function word_count(){

  var mydiv = document.getElementById("d");

  var max = 90;

  var count = document.getElementById("area1").value.length;

  if(count<max)

   mydiv.innerHtml = count +"/" + max;

  else

   document.getElementsByTagName("textarea")[0].value = document.getElementsByTagName("textarea")[0].value.substr(0,max);

 }



 function load(){  var text = document.getElementsByTagName("textarea")[0];

  //请空

  text.value = "";

  text.focus();

 }

 </script>

 <style type="text/css">

 #d{

  display: none;

  position: absolute;

  width: 50px;

  height: 14px;

  color: black;

  background: yellow;

 }

 </style>

</head>

<body>

 <form>

  <textarea onfocus="show_count()" onblur="hidden_count()" 

  onload="load()" 

   onpropertychange="word_count()" cols="60" rows="8" id="area1">123</textarea>

  <div id="d">mxl</div>

 </form>

</body>

</html>

...全文

183 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

guard_of_soul 2012-11-13

打赏
举报

引用 1 楼 chhxxc 的回复:

你连事件都没有绑定怎么会有文本显示呢

是我认为js对大小写不敏感。这里错了。。

guard_of_soul 2012-11-13

打赏
举报

引用 2 楼 zzgzzg00 的回复:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-……

。。。html对大小写不敏感。。js我也以为这样了。。谢谢了

似梦飞花 2012-11-12

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> /* *当textarea获得焦点，显示当前输入字数 *当textarea失去焦点，隐藏 */ //获得焦点，显示 function show_count(){ var mydiv = document.getElementById("d"); var max = 90; var count = document.getElementById("area1").value.length; if(count>0){ mydiv.innerHTML =count +"/" + max; } mydiv.style.display = "block"; } //失去焦点，隐藏 function hidden_count(){ document.getElementById("d").style.display = "none"; } //textarea域改变，改变div文本 function word_count(){ var mydiv = document.getElementById("d"); var max = 90; var count = document.getElementById("area1").value.length; if(count<max) mydiv.innerHTML = count +"/" + max; else document.getElementsByTagName("textarea")[0].value = document.getElementsByTagName("textarea")[0].value.substr(0,max); } function load(){ var text = document.getElementsByTagName("textarea")[0]; //请空 text.value = ""; text.focus(); } </script> <style type="text/css"> #d{ display: none; position: absolute; width: 50px; height: 14px; color: black; background: yellow; } </style> </head> <body> <form> <textarea onfocus="show_count()" onblur="hidden_count()" onload="load()" onkeyup="word_count()" cols="60" rows="8" id="area1">123</textarea> <div id="d">mxl</div> </form> </body> </html> 这样试试是innerHTML 拉