反应:如何选择每个div中的所有文本

Question

当我按Ctrl + A(命令+ A)时，它会选择页面中的所有文本。 当我按 Ctrl + A(命令 + A)时，如何仅选择所选div 内的字母？

下面是我的完整代码。

import React, { useState } from 'react';
const Test = () => {
const [chatList, setChatList] = useState([]);
const onSubmit = (e) => {
e.preventDefault();
const value = e.target[0].value;
setChatList([...chatList, { value }]);
};
return (
<div>
<form onSubmit={onSubmit}>
<textarea placeholder="Enter text"></textarea>
<button type="submit">submit</button>
</form>
{chatList.map((chat, index) => (
<div key={index} style={{ whiteSpace: 'pre-wrap' }}>
{chat.value}
</div>
))}
</div>
);
};
export default Test;

Answer 1

浏览器无法使用Ctrl+A有选择地突出显示。全选将真正选择页面上的所有文本。您可能可以使用浏览器插件一次选择不同的行，但您将无法可靠地为其他人提供这种体验。

虽然我不知道确切的用例，但我会假设它是复制/粘贴内容。

我建议获取您想要的不同内容区域的值并将其放入文本区域中(您几乎肯定会希望文本区域隐藏在style="display:none"中)。

然后，一旦内容全部位于文本区域中，您就可以以编程方式将其复制到剪贴板。

然后，您可以提供一个简单的"复制"按钮，而不是让用户点击Ctrl+A，这对于不熟悉全选快捷方式的人来说更具指导性。

下面是一个基本示例，显示了 vanilla JS 中的复制函数。

<textarea></textarea>
<script>
// fetch the textarea
var textarea = document.querySelector('textarea');
// add content to the textarea
textarea.value = '' // clear it
textarea.value += 'First Content Area' // this represents content from different parts of your site
textarea.value += 'Second Content Area' // this represents content from different parts of your site
textarea.value += 'Third Content Area' // this represents content from different parts of your site
// copy it to the clipboard
textarea.focus();
textarea.select();
document.execCommand('copy');
</script>

这是复制数据的一个非常基本的示例。有关更多详细信息，请查看此答案：如何在 JavaScript 中复制到剪贴板？