急！在线等! js或css设置input或textarea的高度自动适应文本内容长度

使用js或css设置input或textarea的高度自动适应文本内容长度,以便在input或textarea中全部显示文本内容。很急，请各位大侠赐教！！javacsshtml

解决方案 »

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

设置样式
overflow: visible;
设置一个隐藏div用来获得input或textarea内容，给input或textarea加个keydown事件，用来获得隐藏div的宽高度试试
2楼正解。时时把输入框中的内容复制到一个pre标签内部，让浏览器自己计算pre的高度，然后我们用js去获取pre的高度，回头设置给该textarea即可。这里必须保证pre的字体大小、行高和宽度等要和textarea的一致。
谢谢楼上的同学们些。
如果使用textarea 在网上看到个解决办法，在手动输入的情况下问题解决！<textarea id="ta1" rows="1" cols="80" onpropertychange="this.style.posHeight=this.scrollHeight"
                                        onfocus="this.style.posHeight=this.scrollHeight" style="overflow:auto"></textarea>问题可以使用textarea绕过去了。
但是使用input type="text"不行，愿意继续等待input;text的解决方案
我觉得#2的方法可行，我似乎在某著名的产品中见到他们就是这么做的。我简单的写了个例子，仅做demo，样式还需要再调整。整个代码可以好好包装一下，做成一个可复用的控件。<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>js demo</title>    <style type="text/css">
      #content{
border: solid #ccc 1px;
line-height: 30px;
padding: 5px 0;
padding-right: 25px;
font-size: 12px;
font-family: arial;
  }
  #input{
margin-left: -25px;
width:20px;
border: none;
font-size: 12px;
font-family: arial;
padding: 0;
  }
    </style>
  </head>  <body>
<span id="content"></span><input id="input" />
  </body>
</html>
<script>
var inputEl = document.getElementById('input');
var contentEl = document.getElementById('content');
contentEl.onclick=function(){
inputEl.focus();
} inputEl.onkeydown = function(e){
if(e.keyCode==8){
var text = contentEl.innerHTML;
var len = text.length;
if(len==0){
return;
}
contentEl.innerHTML = text.substring(0, len-1);
return;
}
contentEl.innerHTML = contentEl.innerHTML + inputEl.value;
inputEl.value = '';
//根据具体业务需求，还需要处理很多事件，比如鼠标点击了字符串的中部，则新的内容要插入到鼠标的位置。
//还需要提供一个隐藏域，用它保存输入的值，便于form提交。
}
</script>
代码仅在firefox上测过，ie的话还需要兼容处理event模型。
input type="text" 只能是单行文本
可以把输入框的样式调到只有光标看得见的地步，然后插入到span#content里面，这样做的就和真的一样了。
嗯，9#的方法感觉可行，就是用起来有点复杂了些。再补充一下，该问题在IE8、IE9的兼容性视图中使用 (也就是说要在IE6上能用)
可以好好包装一下，做成jquery插件的形式，也不会很复杂，
比如，我也面上是这样的<input type="text" class="myInput" />,页面启动之后，jquery插件会查看页面上有没有class=myInput的输入框，如果有，就自动把他变成我在#6做的那个效果。
可以好好包装一下，做成jquery插件的形式，也不会很复杂，
比如，我也面上是这样的<input type="text" class="myInput" />,页面启动之后，jquery插件会查看页面上有没有class=myInput的输入框，如果有，就自动把他变成我在#6做的那个效果。目前还没有时间实验，我主要是担心你边输入边赋值给span这个过程不太好处理-------------------------------------
关于textarea, overflow: visible;是有滚动条在旁边放着的，overflow: auto就没有。
再给你一个修正版，我在ie10下测试过，别的估计问题也不大。因为不兼容的地方只有event。
元素也重新布局，做成控件的话更结构更合理。<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>js demo</title>    <style type="text/css">
      #contentWrap{
border: solid #ccc 1px;
line-height: 30px;
padding: 5px 0;
padding-right: 25px;
/*需要指定输入框和内容span的字体一致，*/
font-size: 12px;
font-family: arial;
  }
  #input{
margin-left: 0;
width:10px;
border: none;
/*否则输入框会默认使用不一样的字体*/
font-size: 12px;
font-family: arial;
padding: 0;
  }
    </style>
  </head>  <body>
<span id="contentWrap"><span id="content"></span><input id="input" /></span>
  </body>
</html>
<script>
var inputEl = document.getElementById('input');
var contentWrapEl = document.getElementById('contentWrap');
var contentEl = document.getElementById('content');
contentWrapEl.onclick=function(){
inputEl.focus();
} inputEl.onkeydown = function(e){
if(typeof(event)!='undefined'){
e = event;
}
if(e.keyCode==8){
var text = contentEl.innerHTML;
var len = text.length;
if(len==0){
return;
}
contentEl.innerHTML = text.substring(0, len-1);
return;
}
contentEl.innerHTML = contentEl.innerHTML + inputEl.value;
inputEl.value = '';
// 根据具体业务需求，还需要处理很多事件，比如
// 还需要处理选中效果，光标插入效果
// 还需要提供一个隐藏域，用它保存输入的值，便于form提交。
}
</script>
inputEl.onkeydown = function(e){
        if(typeof(event)!='undefined'){
            e = event;
        }改成inputEl.onkeydown = function(e){
       var e = e || window.event;