急 js或css设置input或textarea的高度自动适应文本内容长度
日期：2014-05-16 浏览次数：20315 次
急！在线等! js或css设置input或textarea的高度自动适应文本内容长度
使用js或css设置input或textarea的高度自动适应文本内容长度,以便在input或textarea中全部显示文本内容。
很急，请各位大侠赐教！！
------解决方案--------------------
设置样式
overflow: visible;
------解决方案--------------------
设置一个隐藏div用来获得input或textarea内容，给input或textarea加个keydown事件，用来获得隐藏div的宽高度试试
------解决方案--------------------
2楼正解。
时时把输入框中的内容复制到一个pre标签内部，让浏览器自己计算pre的高度，然后我们用js去获取pre的高度，回头设置给该textarea即可。
这里必须保证pre的字体大小、行高和宽度等要和textarea的一致。
------解决方案--------------------
可以把输入框的样式调到只有光标看得见的地步，然后插入到span#content里面，这样做的就和真的一样了。
------解决方案--------------------
再给你一个修正版，我在ie10下测试过，别的估计问题也不大。因为不兼容的地方只有event。
元素也重新布局，做成控件的话更结构更合理。
使用js或css设置input或textarea的高度自动适应文本内容长度,以便在input或textarea中全部显示文本内容。
很急，请各位大侠赐教！！
java
css
html
------解决方案--------------------
设置样式
overflow: visible;
------解决方案--------------------
设置一个隐藏div用来获得input或textarea内容，给input或textarea加个keydown事件，用来获得隐藏div的宽高度试试
------解决方案--------------------
2楼正解。
时时把输入框中的内容复制到一个pre标签内部，让浏览器自己计算pre的高度，然后我们用js去获取pre的高度，回头设置给该textarea即可。
这里必须保证pre的字体大小、行高和宽度等要和textarea的一致。
------解决方案--------------------
可以把输入框的样式调到只有光标看得见的地步，然后插入到span#content里面，这样做的就和真的一样了。
------解决方案--------------------
再给你一个修正版，我在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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
