如何使用Prototype Autosizing textarea?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (9)

我目前正在为我工​​作的公司开发内部销售应用程序,并且我有一个允许用户更改送货地址的表单。

现在我认为它会更好看,如果我用于主要地址细节的textarea只占用文本区域,并且在文本发生更改时自动调整大小。

这是当前的截图。

有任何想法吗?

提问于
用户回答回答于

当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代码非常天真,没有经过很好的测试,你可能不希望在带有小说的文本框中使用它,但你会得到一般想法。

用户回答回答于

基本路线似乎是: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>

扫码关注云+社区