是否可以使用 HTML 或 javascript 操作文本区域的各个行？答案

【问题标题】：Is it possible to manipulate individual lines of a textarea with HTML or javascript?是否可以使用 HTML 或 javascript 操作文本区域的各个行？
【发布时间】：2016-08-10 18:57:19
【问题描述】：

我想找到一种方法来单击文本区域的各个行并将它们移动到不同的位置。我把运动部分放下了，但找不到任何关于是否可以只做单行的信息。感谢您的任何意见。

http://jsbin.com/vinuvopimo/edit?html,js,output

<html>
<body>



<textarea id="input"> Click me.</textarea> 
<textarea id="output"> </textarea>

<script>

document.getElementById("input").onclick = function() {myFunction()};



function eraseText() {
        document.getElementById("input").value = "";

    } 

 function myFunction() {

    var InputVar = document.getElementById("input").value;
    var OutputVar = document.getElementById("output");

        OutputVar.value = InputVar;

//  cleanup     
eraseText();    
}

</script>

</body>
</html>

【问题讨论】：

不需要匿名包装功能。你可以使用onclick = myFunction;
您想将文本区域的内容拆分为一个数组，操作该数组然后使用join 将它们重新组合在一起。这可能会对您有所帮助：stackoverflow.com/questions/21895233/…
您是否在某处插入换行符（或其他分隔符）？否则它实际上是由浏览器包裹的单行。更改 jsbin 中 textarea 的大小会更改“行”的数量。
我将一个数组输入到这个函数中，用一个新行分割每个元素 .join(',').replace(/,/g, '\n').split();
为任何感兴趣的人找到了与 Jquery 类似的功能。 stackoverflow.com/questions/13574588/…

标签： javascript html

【解决方案1】：

如果您想操作单独的行 - 您必须弄清楚用户点击的确切位置。选项很少：

最简单的方法 - 将左侧输入分成许多单行输入（在视觉上您可以操纵 css 使其看起来像一个组件），而不是您可以创建将线移动到任何地方的逻辑。

如果你想留在单个textarea，你可以获取鼠标事件y坐标并计算行号。

http://jsbin.com/xirinocora/1/edit?html,js,output

【讨论】：

感谢您的信息，我会尝试这些想法。