如何使用Prototype Autosizing textarea？
如何使用Prototype Autosizing textarea？
提问于 2018-03-27 12:12:16
我目前正在为我工作的公司开发内部销售应用程序，并且我有一个允许用户更改送货地址的表单。
现在我认为它会更好看，如果我用于主要地址细节的textarea只占用文本区域，并且在文本发生更改时自动调整大小。
这是当前的截图。
ISO地址
有任何想法吗？
Stack Overflow用户
发布于 2018-03-27 20:50:27
当Facebook在人们的墙上写字时，Facebook会这样做，但只能垂直调整大小。
水平调整大小会让我感到混乱，这是由于单词换行，长行等等，但垂直调整大小似乎相当安全和美观。
我所知道的Facebook使用新手都没有提及任何有关它或被困惑。我会用这个轶事证据来说'继续，实施它'。
一些使用Prototype的 JavaScript代码（因为这是我熟悉的）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script language="javascript">
google.load('prototype', '1.6.0.2');
</script>
</head>
<body>
<textarea id="text-area" rows="1" cols="50"></textarea>
<script type="text/javascript" language="javascript">
resizeIt = function() {
var str = $('text-area').value;
var cols = $('text-area').cols;
var linecount = 0;
$A(str.split("\n")).each( function(l) {
linecount += Math.ceil( l.length / cols ); // Take into account long lines
})
$('text-area').rows = linecount + 1;
};
// You could attach to keyUp, etc. if keydown doesn't work
Event.observe('text-area', 'keydown', resizeIt );
resizeIt(); //Initial on load
</script>
</body>
</html>
PS：很显然，这段JavaScript代码非常天真，没有经过很好的测试，你可能不希望在带有小说的文本框中使用它，但你会得到一般想法。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100003718
复制相关文章
相似问题