关于调整文本区域大小的提示

Question

需要一些 help/pointers...

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

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

此外，如果用户在行到达右边界之前会断行，我应该搜索 \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>

Answer 1

您可以使用 clientHeight 与 scrollHeight 调整文本区域高度以匹配滚动高度

这是您的代码的工作副本

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>

关于调整文本区域大小的提示

Pointers about resizing text area

javascript

regex

textarea