懂视1
懂视101
懂视201
懂视301
懂视401
懂视501
懂视601
懂视701
懂视801
懂视901
懂视1001
懂视1101
懂视1201
懂视1301
懂视1401
懂视1501
懂视1601
懂视1701
懂视1801
懂视1901
文库1
文库101
文库201
文库301
文库401
文库501
文库601
文库701
文库801
文库901
文库1001
文库1101
文库1201
文库1301
文库1401
文库1501
文库1601
文库1701
文库1801
文库1901
比熊情感
全部频道
首页
科技
教育
生活
旅游
时尚
美容
美食
健康
体育
游戏
汽车
家电
您的当前位置：
首页
input宽度自适应_javascript技巧
input宽度自适应_javascript技巧
来源：比熊情感
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> 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)"/> 0个字符 </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
<center> input高度固定，自动增宽 <input type="text" style="width:60;overflow-x:visible;overflow-y:visible;"> textarea宽度固定，自动增高 <textarea type="text" style="width:260;overflow-x:visible;overflow-y:visible;"></textarea>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
感谢网友“liufabin”提出的关于不支持FF的问题，第一个在FF下经过测试时支持的，第二个中的高度自适应不支持，我在网上找了一个JQUERY的插件，插件地址是：http://plugins.jquery.com/project/autogrow需要用到的JS文件地址为
http://img.jb51.net/jslib/jquery/jquery.autogrow.js
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>input宽度自适应 2009-05-28</title> </ script> </ script> $(function(){ $("#textarea").autogrow(); }) </ script> </head> <body> <textarea style="min-height:80px" id="textarea"></textarea> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
显示全文