javascript - 选项卡出现在文本区域中

标签 javascript css

当用户点击 <p>我希望它的文本位于 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>

最佳答案

在设置文本区域的值之前,您可以用单个空格替换多个制表符和空格(由于您的格式而出现),例如:

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

演示

Try before buy

解释

你看到的是一个regular expression pattern . \sspecial character匹配单个空白字符(包括空格、制表符、换页符和换行符)。 gflag代表全局搜索,表示表达式将匹配所有出现的地方。 {1,} 最后表示匹配前一个字符一次或多次。这是equivalent to + .

关于javascript - 选项卡出现在文本区域中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30184201/

相关文章:

javascript - 如何根据对象的属性加载动态组件?

html - css 定位 div 而不是 form

php - 如何拦截 css get 请求

CSS "@media only screen"仅在我调整窗口大小时触发?

相当于 n<5 的 CSS nth-of-type(...) 扇区?

javascript - Node.js 与异步 waterfall 模块同步调用

javascript - 使用 Ajax Laravel 在日期选择器为空时在数据库中插入 NULL

javascript - Browserify 在模块中需要模块

javascript - 使用按钮切换表格

javascript - 为 Accordion 打开/关闭添加缓动效果