如何使用Prototype Autosizing textarea？
如何使用Prototype Autosizing textarea？
提问于 2018-03-27 12:12:16
我目前正在为我工作的公司开发内部销售应用程序，并且我有一个允许用户更改送货地址的表单。
现在我认为它会更好看，如果我用于主要地址细节的textarea只占用文本区域，并且在文本发生更改时自动调整大小。
这是当前的截图。
ISO地址
有任何想法吗？
Stack Overflow用户
发布于 2018-03-27 21:19:38
基本路线似乎是：1）将textarea的内容复制到一个隐藏的div中，2）让浏览器执行计算该div高度的工作，然后3）将textarea的高度设置为该高度。通过让CSS处理textarea的大小，步骤＃3可以省略，代码量减少。将textarea和hidden div放在同一个容器中，并适当使用visibility：hidden，让隐藏div的高度直接驱动textarea的高度。
<!doctype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Auto-size TextArea Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
#container {
position: relative;
}
#textArea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
#textCopy {
box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-family: Helvetica, Arial, sans-serif;
padding: 6px; /* Same border+padding as text area. */
padding-bottom: 1.15em; /* A bit more than one additional line of text. */
visibility: hidden;
width: 100%;
}
</style>
<script>
$(function() {
$(this.textBox)
.change(autoSize)
.keydown(autoSize)
.keyup(autoSize);
autoSize();
});
function autoSize() {
// Copy textarea contents; browser will calculate correct height of copy,
// which will make overall container taller, which will make textarea taller.
var text = $("#textArea").val().replace(/\n/g, '<br/>');
$("#textCopy").html(text);
}
</script>
</head>
<body>
<div id="container">
<textarea id="textArea"></textarea>
<div id="textCopy"/>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100003718
复制相关文章
相似问题