在经典上的一个随着输入文字的多少自动变化宽度的INPUT.有时候可能会需要这

用JS来控制:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function checkLength(which) {
  var maxchar=100;
    var oTextCount = document.getElementById("char");  
    iCount = which.value.replace(/[^\u0000-\u00ff]/g,"aa").length;
  if(iCount<=maxchar)
  {
    oTextCount.innerHTML = "<font color=#FF0000>"+ iCount+"</font>";
    which.style.border = '1px dotted #FF0000';
  which.size=iCount+2;
  }
  else alert("请不要超过"+maxchar);
}
</script>
</head>
<body>
<input name="words" size="2" maxlength="100" onkeyup="checkLength(this)"/>
    <span id="char">0</span>个字符
</body>
</html>




用CSS的溢出来处理:


<center>
input高度固定,自动增宽<br>
<input  type="text"  style="width:60;overflow-x:visible;overflow-y:visible;">
<br>
<br>
textarea宽度固定,自动增高<br>
<textarea  type="text"  style="width:260;overflow-x:visible;overflow-y:visible;"></textarea>


显示剩余字数的:

<HTML>    
  <BODY>    
  <script>    
    function   textCounter(field,   maxlimit)   {    
      if   (field.value.length   >   maxlimit)    
        field.value   =   field.value.substring(0,   maxlimit);    
      else    
        document.WRITEMSGTXT.remLen.value   =   maxlimit   -   field.value.length;    
    }    
    </script>    
    <form   name=WRITEMSGTXT>    
    <table   width=447   bgcolor=#eaffe0>    
    <tr>    
      <td   width=50%   colspan=3><font   color=46A718>有事请留言</font></td>    
            <td   align=right><font>剩余字数:<input   name=remLen   value=50   readonly   type=text   size=4   maxlength=3   style="background-color:   #eaffe0;   border:   0;   color:   red"></font></td>    
    </tr>    
    </table>    
    <table   width=447>    
    <tr   align=center>    
      <td   colspan=3><textarea   name=words   class=input1   onPropertyChange="textCounter(WRITEMSGTXT.words,   50)" type="text"  style="width:260;overflow-x:visible;overflow-y:visible;"></textarea>
</td>    
    </tr>    
    </form>    
    </table>    
  </BODY>    
  </HTML>  


网站制作 | 评论(0) | 引用(0) | 阅读(502)
发表评论
表情
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
打开HTML
打开UBB
打开表情
隐藏
记住我
昵称   密码   游客无需密码
网址   电邮   [注册]