Question

当用户点击<p>元素时，我希望其文本位于textarea元素中。我的问题是，textarea中出现的文本位于一个空白行的下方，并且在其上方向右移动。

为什么会这样？

我也尝试将textarea放入div并用定位来修复它但是没有用。

我希望使用纯* JavaScript **以及 CSS 来实现它。

这是我到目前为止所拥有的：

<!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').innerHTML;
        var holder = document.getElementById("holder");
        var input = document.createElement("textarea");

        document.getElementById('p1').onclick = function(){
            input.id = "textarea_id";
            input.style.display = "block";
            input.style.padding = "0px";
            input.style.margin = "0px";
            //input.style.textAlign = "left"; does not do anything
            input.style.width = "562px";

            input.value = text_to_copy;
            alert(input.value);//just to see if onclick works

            holder.appendChild(input);

        } 

    </script>

</body> 
</html>

Answer 1

您移动textarea内的内容，即您在标记内留下的空格。然后我给你举个例子，你没有把第一行间距放在左边。

＆＃13;

var text_to_copy = document.getElementById('p1').innerHTML;
var holder = document.getElementById("holder");
var input = document.createElement("textarea");

document.getElementById('p1').onclick = function(){
  input.id = "textarea_id";
  input.style.display = "block";
  input.style.padding = "0px";
  input.style.margin = "0px";
  //input.style.textAlign = "left"; does not do anything
  input.style.width = "562px";

  input.value = text_to_copy;
  alert(input.value);//just to see if onclick works

  holder.appendChild(input);

}

＆＃13;

<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>
</body> 

</html>

＆＃13;

Answer 2

在设置textarea的值之前，您可以使用单个空格替换多个制表符和空格（由于您的格式化而出现），例如：

input.value = text_to_copy.replace(/\s{1,}/g, ' ');

<强>演示

Try before buy

<强>解释

您看到的是regular expression pattern。 \s是special character，匹配单个空格字符（包括空格，制表符，换页符和换行符）。 g是flag，代表全局搜索，这意味着该表达式将匹配所有匹配项。 {1,}最终意味着匹配前一个字符一次或多次。这是equivalent to +。

标签显示在textarea中

2 个答案: