我有一个包含textarea元素的div。 div的大小是固定的,但滚动条会显示是否输入了足够的文本。目前,textarea高度可以正确动态增长和缩小,但不是宽度。动态调整文本区宽度和高度以包含文本
我已被修改给定的代码在这里:http://alistapart.com/article/expanding-text-areas-made-elegant和已经得到了这一点(在的jsfiddle示出):http://jsfiddle.net/fayu5sh2/2/
它目前的工作方式是,textarea的被设定为100%的宽度和高度div,它的内容被送入一个隐藏的跨度,它改变了高度(当按下输入时)和包含div的宽度。跨度正确运行时,textarea不保持宽度:100%。是否有可能做到这一点?
隐藏跨度当前可见,以显示其内容正在做什么,textarea中的文本应该直接位于跨度中文本的顶部。
下面是HTML:
<div id="containing_box">
<div class="expandingArea">
<pre><span></span><br></pre>
<textarea></textarea>
</div>
</div>
这里是JavaScript:
$(document).ready(
function() {
$('div.expandingArea').each(function() {
var area = $('textarea', $(this));
var span = $('span', $(this));
area.bind('input', function() {
span.text(area.val());
});
span.text(area.val());
$(this).addClass('active');
});
}
);
和CSS:
#containing_box {
width: 300px;
height: 200px;
overflow: auto;
border: 1px solid;
}
textarea,
pre, p {
margin: 0;
padding: 0;
outline: 0;
border: 0;
}
.expandingArea {
position: relative;
border: 1px solid #888;
background: #fff;
}
.expandingArea > textarea,
.expandingArea > pre {
padding: 5px;
background: transparent;
white-space: pre;
}
.expandingArea > textarea {
/* The border-box box model is used to allow
* padding whilst still keeping the overall width
* at exactly that of the containing element. */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
/* This height is used when JS is disabled */
height: 100px;
width: 100px;
}
.expandingArea.active > textarea {
/* Hide any scrollbars */
overflow: hidden;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
/* Remove WebKit user-resize widget */
resize: none;
}
.expandingArea > pre {
/* display: none;*/
color: blue;
}
.expandingArea.active > pre {
display: block;
/* Hide the text; just using it for sizing */
/* visibility: hidden; */
}
检查这个线程。 http://stackoverflow.com/questions/17772260/textarea-auto-height – sbjumani 2014-09-12 23:00:16
@sbjumani我找到的所有线程似乎只处理调整textarea高度,不幸的是不是宽度... – Ayb4btu 2014-09-12 23:09:02
你想避免包装,还是你想宽度和高度总是相等,所以textarea是一个正方形? – 2014-09-12 23:15:02