How to prevent highlighting of text upon selecting text in input field

Question

I would like to copy text in the input field but without highlighting selected text. Below is the code snippet,

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

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

I have tried add css to input field as below but did not work.

.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"/>

Could someone help me with this. thanks.

Try this https://stackoverflow.com/a/29222158/4321808 or simply make the input a div — Ravi Theja, Jul 11 '18 at 09:53
Possible duplicate of [Prevent select on input text field](https://stackoverflow.com/questions/29221991/prevent-select-on-input-text-field) — Micheal O'Dwyer, Jul 11 '18 at 10:11

sujana · Answer 1 · 2018-07-11T21:20:04.497

I found answer to my question and thought would help others too. So posting an answer here. On clicking copy button after copying the text to clipboard i used window.getSelection().removeAllRanges() to deselect the text in input field. Below is the code snippet,

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

EDITED: Above above only for chrome and not on IE11 so used the below lines which works both on chrome and IE11 to deselect text in input field.

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

How to prevent highlighting of text upon selecting text in input field

1 Answers1