reactjs 通过三次单击或“过度选择”选择文本会在粘贴时产生新行

7gs2gvoe 于 11个月前发布在 React

关注(0)|答案(1)|浏览(72)

使用React/Ts，我有一个显示用户输入的方法：

function displayMsg({ msg}: UsrMsg) {

    return (
       <div>
          {msg.split('\n').map((line) => (
             <Fragment>{line}</Fragment>
          ))}
       </div>
    );
}

字符串
问题是，当三次点击然后复制和粘贴时，我会在粘贴的文本中得到一个额外的行：

输入一行：

blabla msg

型

输出Two-liner：

blabla msg

型

输入：多行

bla1
bla2
bla3

型

输出：多行。

这只会发生在选择 *3点击 *，复制，然后粘贴。与正常的2点击选择，这个问题是不存在的：/

bla1
bla2
bla3

型
我试着使用whiteSpace prop来处理CSS，但没有什么不同。：（
这个问题在Firefox、Chrome和Edge上是一致的。

编辑一：

使用的操作系统是windows。我没有在其他操作系统上测试过。

编辑二：

我怀疑HTML标签是被复制沿着与3点击选择或“过度选择”，因此，当粘贴被显示为一个换行符。
同样的问题可以在互联网上看到很多。举个例子，以Worldcounter.net这里是一个图像，显示你从世界计数器的结果！
Try to copy the selected text as shown in the image, then paste it :)

reactjs

来源：https://stackoverflow.com/questions/77500034/selecting-text-by-triple-click-or-overselecting-results-in-new-lines-upon-past

1条答案

按热度按时间

8yoxcaq71#

问题：

问题是，当三次点击，然后复制和粘贴我得到一个额外的一行在粘贴文本

原因：

我尝试在浏览器上的任何页面上单击三次，然后在Notepad++中复制粘贴该文本。之后，我通过进入View Tab> Show Symbol > Show All Characters启用了一个设置。我发现在某些页面上，三次单击复制文本（从一些标签，如p标签，li tag had）包含CRLF控制字符。CRLF控制字符告诉下一个字符到下一行，然后到行的开头。

解决方案：

尝试将模式\n更改为\r\n，这将针对CRLF字符。
你还可以进一步过滤结果，删除空字符。通过在msg上使用trim()，然后split &使用filter返回true（非null，未定义，“”）的元素，然后map。

<div>
  {msg.trim().split('\r\n').filter(e => e).map((line) => (
      <Fragment>{line}</Fragment>
   ))}
</div>

字符串

请阅读：

CRLF：https://developer.mozilla.org/en-US/docs/Glossary/CRLF
如果您还有疑问，请留言 *

赞(0）回复(0）举报 11个月前

我来回答