- 使用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 :)
1条答案
按热度按时间8yoxcaq71#
问题:
问题是,当三次点击,然后复制和粘贴我得到一个额外的一行在粘贴文本
原因:
我尝试在浏览器上的任何页面上单击三次,然后在Notepad++中复制粘贴该文本。之后,我通过进入
View Tab
>Show Symbol
>Show All Characters
启用了一个设置。我发现在某些页面上,三次单击复制文本(从一些标签,如p标签,li tag had)包含CRLF
控制字符。CRLF
控制字符告诉下一个字符到下一行,然后到行的开头。解决方案:
\n
更改为\r\n
,这将针对CRLF
字符。trim()
,然后split
&使用filter
返回true(非null,未定义,“”)的元素,然后map
。字符串
请阅读: