Javascript 选项卡显示在文本区域中_Javascript_Css

Javascript 选项卡显示在文本区域中

javascript css

Javascript 选项卡显示在文本区域中,javascript,css,Javascript,Css,当用户单击元素时，我希望它的文本位于文本区域元素中。我的问题是，文本区域中出现的文本位于一个空行的下方，而在该空行的上方则向右移动为什么会这样我还尝试将textarea放入div中，并通过定位来修复它，但没有成功我想用纯*JavaScript**和CSS（如果需要）来实现它以下是我目前掌握的情况： <!DOCTYPE html> <html> <head> </head> <body> <p id="p1">

当用户单击

元素时，我希望它的文本位于

文本区域

元素中。我的问题是，文本区域中出现的文本位于一个空行的下方，而在该空行的上方则向右移动

为什么会这样

我还尝试将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>



文本文本文本文本文本，
文本文本文本文本文本，
文本文本文本文本文本，
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。

var text_to_copy=document.getElementById（'p1'）.innerHTML；
var holder=document.getElementById（“持有人”）；
var输入=document.createElement（“textarea”）；
document.getElementById（'p1'）。onclick=function（）{
input.id=“textarea\u id”；
input.style.display=“block”；
input.style.padding=“0px”；
input.style.margin=“0px”；
//input.style.textAlign=“left”不起任何作用
input.style.width=“562px”；
input.value=text\u to\u copy；
警报（input.value）；//只是看看onclick是否有效
holder.appendChild（输入）；
}

将内容移动到文本区域内，即标记中留下的空格。然后我给你看一个例子，你没有把第一行的间距，或者放在左边

var text\u to\u copy=document.getElementById（'p1'）.innerHTML；
var holder=document.getElementById（“持有人”）；
var输入=document.createElement（“textarea”）；
document.getElementById（'p1'）。onclick=function（）{
input.id=“textarea\u id”；
input.style.display=“block”；
input.style.padding=“0px”；
input.style.margin=“0px”；
//input.style.textAlign=“left”不起任何作用
input.style.width=“562px”；
input.value=text\u to\u copy；
警报（input.value）；//只是看看onclick是否有效
holder.appendChild（输入）；
}


文本，
文本文本文本文本文本，
文本文本文本文本文本，
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

在设置textarea的值之前，您可以将多个选项卡和空格（由于格式设置而出现）替换为一个空格，如：

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

演示

解释

你所看到的是一张照片。

\s

是一个匹配单个空白字符（包括空格、制表符、换行符和换行符）的字符

是一个表达式，表示全局搜索，这意味着表达式将匹配所有匹配项

{1，}

最后表示将前面的字符匹配一次或多次。这是。

因为在你的段落标记中，文本也有空格和缩进。你能解释一下你答案中的几点吗？在\s{1}中，您省略了逗号后的数字。那么它的值是零吗？“g代表什么？”阿纳米德我补充了一个解释。我希望这能回答你所有的问题