易网时代-编程资源站
Welcome
微信登录
编程资源
图片资源库
蚂蚁家优选
PDF转换器
软件资源
软件开发
、
小程序制作
、
系统集成与运维
、
空间租用
、
硬件开发
、
视频监控
、
技术咨询与支持
——联系电话：0311-88999002/88999003
首页
/
脚本样式
/
JavaScript
/
input 宽度自适应
<！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=gb2312" /> <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>
[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
<！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=gb2312" /> <title>input宽度自适应 2009-05-28</title> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery.autogrow.js"></script> <script type="text/javascript"> $（function（）{ $（"#textarea"）.autogrow（）; }） </script> </head> <body><textarea style="min-height:80px" id="textarea"></textarea> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
收藏该网址
版权所有©石家庄振强科技有限公司2024
冀ICP备08103738号-5
网站地图
易网时代-编程资源站
易网时代-编程资源站