I would like to select the contents of a simple span element, when clicked on
<span
onClick={() => // How do I programmatically highlight the `Click Me!` text?}
>Click Me!</span>
Is there any way to do this?
Edit: I'm sorry it seems the question was not clear enough, I do not only want to highlight the span, but I actually want to trigger a dom selection of the element, so afterwards it can be copied and/or written upon (if for example it is within a div with editable content turned on).
Thanks a lot for the answers, but it seems the question was not completely clear, I apologize for that.
In any case, I found an answer here:
Programmatically select text in a contenteditable HTML element?
I really wanted to select the content programmatically, so the final snippet of code I used is the following:
function selectContents(el: any) {
let range = document.createRange();
range.selectNodeContents(el);
let sel = window.getSelection()!;
sel.removeAllRanges();
sel.addRange(range);
}
<span onClick={(e) => selectContents(e.target)}>
{node.name}
</span>
It is working fine in electro, but there might be some compatibility issues with older browsers.
Cheers.
You can use react state to highlight the span programmatically.
class App extends React.Component {
state = {
highlightOn: false,
smallPortionHighlight: false
};
render() {
return (
<div>
<span
style={{ backgroundColor: this.state.highlightOn ? "red" : "white" }}
onClick={() => this.setState({ highlightOn: true })}
>
Click Me!
</span>
<br />
<br />
<span onClick={() => this.setState({ smallPortionHighlight: true })}>
Here is a long text but just highlight this{" "}
<span
style={{
backgroundColor: this.state.smallPortionHighlight
? "red"
: "white"
}}
>
Click Me!
</span>
</span>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>class App extends React.Component {
constructor(props) {
super(props);
this.state = { activate: false };
}
toggleClass() {
const currentState = this.state.active;
this.setState({ active: !currentState });
};
render() {
return (
<div>
<span className={this.state.active ? 'highlight': null}
onClick={ () => this.setState({active: !this.state.active}) } >
Click Me!</span>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));.highlight{
background-color: #FFFF00;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>