FireFox 下input能否自动适应宽度。

设长度可以直接用size='xx'或者style="width:xxxpx"。继续等答案。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

謝謝。我用的就是style= "width:xxxpx "，可是效果就是不同。
你的問題︰style="width:100%"，試試
width:100%是适应父元素的宽度，我要的是在firefox下根据input里value的内容多少而自动适应其宽度。就像IE下设置style="overflow:visible"的效果一样。
单纯靠属性  估计是难了
这个是我弄得一个脚本
几个浏览器看了看效果还行要点：
1.文本框与伪容器(隐藏) textShow 的文字字号字体文字间距相同保证文本不断行
2.多个连续的半角空格处理
3.浏览器刷新后仍保持状态不用时钟  很难解决一些问题
BackSpace 刷新后有时偏慢半天不响应时间
鼠标操作 paste这个初始化时是有固定宽度的
小于这个宽度就不再缩小了
可按需求修改<!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>
<style>
*{padding:0;margin:0;font-family:Arial, Helvetica, sans-serif,"宋体";letter-spacing:0;font-size:12px;}
</style>
</head><body>
<input id="autoInput" style="width:100px;" oninput="autoWidth(this)"/>
<script type="text/javascript">
var autoTimer = null;
function autoWidth(objInput){
var initWidth = 100;
var showObj = document.getElementById("textShow");
if(!showObj){
var nodeDiv = document.createElement("DIV");
nodeDiv.style.position = "absolute";
nodeDiv.style.left = "-1000px";
nodeDiv.id = "textShow";
nodeDiv.style.width = "100px";
nodeDiv.style.overflow = "hidden";
document.body.appendChild(nodeDiv);
showObj = nodeDiv;
}
if(autoTimer == null){
autoTimer = setInterval(function(){
showObj.innerHTML = '<span style="white-space:nowrap">' + objInput.value.replace(/\s/gi, " ") + '</span>';
var trueWidth = showObj.firstChild.offsetWidth;
if(trueWidth > initWidth - 20){
objInput.style.width = trueWidth + 20 + 'px';
}else{
objInput.style.width = initWidth + "px";
}
},30);
}

}
window.onload = function(){
autoWidth(document.getElementById('autoInput'));
}
</script>
</body>
</html>
- - liveforever_1981老兄代码好长。我解决的思路和你差不多，我是先加载一个相同内容的div，然后用绝对定位和visibility让这个层不可见、也不会阻碍地方，然后再把这个div的offsetWidth的值给那个input的style.width。估计没有其它方法实现了，让多些人看看再结帖了，估计也有些人有相同的问题。
<div style="position:absolute;top:-1000px;">
<span id="test" style="font-size:12px;word-break:no;white-space:nowrap"></span>
</div>
<input type="text" onkeydown="keyDown(this)" onchange="keyDown(this)" style="font-size:12px;" />
  <script>
  function   keyDown(obj){
var str = obj.value;
var el = document.getElementById("test");
el.innerHTML = str;
obj.style.width=el.offsetWidth;

  }
  </script>关键是要保证这个div和input的font-size一致
没有直接设置自适应的，不过可以通过设置对象的style.width来设置<html>

<head>

    <title></title>

    <script type="text/javascript">        function showTip() {
            var len = document.getElementById("t1");

            document.getElementById("Tip").style.display = "inline";
            len.style.width = len.value.length * 10+"px";
                    }

    </script>

</head>

<body>

    <div style="width:400px;">

        <input  id="t1" type="text" name="txt1" onchange="showTip()"/>

    </div>

</body>

</html>
document.getElementById("Tip").style.display = "inline";这一句无视吧，忘记删除了