Question

我想在输入字段中复制文本，但不突出显示所选文本。下面是代码段，

click = () => {
    this.input_ref.current.select();
    document.execCommand('copy');
};

<input readOnly ref={this.input_ref} value="hello"/>
<button onClick={this.click}>COPY</button>

我尝试按如下所示将css添加到输入字段，但是没有用。

.no_select {
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
}
<input classname="no_select" readOnly ref={this.input_ref} value="hello"/>

有人可以帮我这个忙吗？谢谢。

Answer 1

我找到了问题的答案，并认为这也会对其他人有所帮助。所以在这里发布答案。在将文本复制到剪贴板后单击复制按钮 window.getSelection（）。removeAllRanges（）取消选择输入字段中的文本。下面是代码段，

click = () => {
   this.input_ref.current.select();
   document.execCommand('copy');
   window.getSelection().removeAllRanges();
};

已编辑：上面仅适用于chrome而不适用于IE11，因此使用了以下行，它们适用于chrome和IE11来取消选择输入字段中的文本。

document.getSelection().removeAllRanges();
document.getSelection().addRange(document.createRange());

在输入字段中选择文本时如何防止突出显示文本

1 个答案: