关于调整文本区域大小的指针答案

【问题标题】：Pointers about resizing text area关于调整文本区域大小的指针
【发布时间】：2015-05-14 10:47:39
【问题描述】：

需要一些帮助/指针....

当用户单击 p 元素时，我希望它的内容显示在文本区域中，以便可以修改文本等...

文本区域的宽度是固定的。因此，当最后一个字符位于右边框时，它会自动移到下一行。在这种情况下，为了创建一个新行，我应该计算多少个字符适合文本区域固定宽度，并且每次满足这个数字时添加一个新行？

另外，如果用户在到达右边界之前将换行，我应该搜索 \n RegExp 吗？（使用 .match()？）

我认为这两种情况需要是 timeInterval(setTimeout 也许？) 以毫秒为单位检查发生的所有输入。我正在尝试使用纯 Javascript 来实现

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <p id="p1">text text text text text text text text text text text,
            text text text text text text text text text text text,
            text text text text text text text text text text text,
            text text text text text text text text text text text.
        </p>
        <div id="holder"></div>
        <script type="text/javascript">
            var text_to_copy = document.getElementById('p1').textContent;
            //every row with a fixed text area width fits 62 characters
            var input = document.createElement("textarea");
            var holder = document.getElementById("holder");

            document.getElementById('p1').onclick = function(){

                holder.appendChild(input);
                input.id = "textarea_id";
                input.style.width = "412px";
                input.value = text_to_copy.replace(/\s{1,}/g, ' ');

                if(text_to_copy.match('\n')){
                    input.rows +=1;
                }

                /*setTimeout(function(){
                    if ((text_to_copy.length % 62) == 0){

                        input.rows += 1;
                    }
                },300);*/
            }
        </script>
    </body> 
</html>

【问题讨论】：

只是一个注释。我认为 \n 表示换行（例如，当用户按下回车键时）。它还包括简单的空格吗？我问是因为 alert(text_to_copy.search('\n'));返回 55
请编辑您的问题而不是评论。

标签： javascript regex textarea

【解决方案1】：

您可以使用 clientHeight 与 scrollHeight 调整 textarea 高度以匹配滚动高度

这是您的代码的工作副本

var text_to_copy = document.getElementById('p1').textContent;
var input = document.createElement("textarea");
var holder = document.getElementById("holder");

document.getElementById('p1').onclick = function(){

  holder.appendChild(input);
  input.id = "textarea_id";
  input.style.width = "412px";
  input.value = text_to_copy.replace(/\s{1,}/g, ' ');

  //This function reset the textarea height base on his content. (when text is added/removed)
  var setTextAreaHeight = function(){
    input.style.height = '5px'; // Set to minimum height possible to create vertical scroll bars
    input.style.height = input.scrollHeight + 'px'; // remove the scroll bars
  }

  //call it once
  setTextAreaHeight();

  //attach to changes/key pressing.
  input.onkeydown = setTextAreaHeight;
  input.onkeyup = setTextAreaHeight;
  input.onchange = setTextAreaHeight;
};

        <p id="p1">text text text text text text text text text text text,
            text text text text text text text text text text text,
            text text text text text text text text text text text,
            text text text text text text text text text text text.
        </p>
        <div id="holder"></div>

【讨论】：