用javascript模拟粘贴到文本区域

Simulate paste into Textarea with javascript

本文关键字：文本 区域 javascript 模拟      更新时间：2023-09-26

当将数据从剪贴板粘贴到html文本区域时，它会进行一些非常酷的解析，使粘贴看起来与复制的换行符非常接近。

例如，我在一个页面上选择了以下html（所有内容都以蓝色突出显示），然后我copy它：

Hello
<br>
<br>
<br>
<div>more</div>
<div>last</div>

所以需要明确的是，我复制的是这个jsfiddle的输出。

现在，当我将这个神奇的、复制的文本粘贴到文本区域时，我看到了我所期望的："Hello", empty line, empty line, empty line, "more", "last"。凉的然后，当我在文本区域使用jQuery的.val（）时，我得到了"Hello'n'n'nmore'nlast"。超级酷。它使用了br和div，并能够从中推断出正确的换行符

现在。。。

我尝试以编程方式执行的操作采用了我之前复制的相同数据，并将其设置为文本区域的值，就好像它是粘贴的一样。

以下是我尝试过的。。。

所以，假设我之前复制的东西是用<div id="parent">...</div>包装的。

var parent = $("#parent");
var textarea = $("#theTextArea");
// Set the value of the text area to be the html of the thing I care about
textarea.val(parent.html());

现在我知道这与复制粘贴不同，但我希望它能照顾我，做我想做的事。事实并非如此。文本区域将填充Hello<br><br><br><div>more</div><div>last</div>。曾经不可见的html现在被字符串化并成为文本的一部分。

显然我做错了。html（）当然会返回html的字符串。但是，我是否可以在parent上调用一些东西，为我提供具有所有推断换行符的文本？。我试过调用parent.text()，但这只提供Hellomorelast（没有换行）。

有几个注意事项可以帮助我找到答案：我正在使用Angular，所以我可以访问他们所有的好东西和jQuery。

编辑：

解决方案


这并不好，但您可以尝试用换行符"''n"替换html标记，或者在html文件中进行一些换行并用text（）获取内容。

var parent1 = $("#paren1");
var textarea1 = $("#theTextArea1");
var parent2 = $("#paren2");
var textarea2 = $("#theTextArea2");
// Set the value of the text area to be the html of the thing I care about
var text = parent1.html();
text = text.replace(new RegExp("<br>", 'g'),"'n");
text = text.replace(new RegExp("<div>", 'g'),"");
text = text.replace(new RegExp("</div>", 'g'),"'n");
textarea1.val(text);
textarea2.val(parent2.text());

JSFiddle

相关文章：