Menu
Is there a cross-browser way to get HTML of selected text?
756
HTML | DOM Input Text select() Method The DOM Input select() method selects all the text content of a textarea or an input element which contains the text field. Syntax: element. select();
You can use the user-select property to disable text selection of an element. In web browsers, if you double-click on some text it will be selected/highlighted. This property can be used to prevent this.
Wrap text around a picture or drawing object Select the picture or object. Select Format and then under Arrange, select Wrap Text. Choose the wrapping option that you want to apply.
Highlight using the HTML5 <mark> tag If you are working on an HTML5 page, the <mark> tag can quickly highlight text. Below is an example of the how to use the mark tag and its result. If your browser supports the <mark> tag, "highlighted text" should have a yellow background.
The <option> tag is used to define the possible options to choose from. The tag is put into <select> tag. The first option from the options’ list is selected by default.
How to get the Highlighted/Selected text in JavaScript? There may be a need to find out the text selected/highlighted by the user. It can be done very easily using the window and document objects and their properties. Handling selected text is different for different browsers. The ways to get selected text are shown below: Time to try out the code.
It can be done very easily using the window and document objects and their properties. Handling selected text is different for different browsers. The ways to get selected text are shown below: Time to try out the code. Run the code, select a text and press the button to show the selected text:
HTML selected attribute. selected. The purpose of the HTML selected attribute is to specify whether an option is selected in a form. HTML selected attribute supports option element.
This function will do it in all major browsers:
function getSelectionHtml() { var html = ""; if (typeof window.getSelection != "undefined") { var sel = window.getSelection(); if (sel.rangeCount) { var container = document.createElement("div"); for (var i = 0, len = sel.rangeCount; i < len; ++i) { container.appendChild(sel.getRangeAt(i).cloneContents()); } html = container.innerHTML; } } else if (typeof document.selection != "undefined") { if (document.selection.type == "Text") { html = document.selection.createRange().htmlText; } } return html; } // bind events for selection document.addEventListener('mouseup', function(){ var selectedHTML = getSelectionHtml(); if( selectedHTML ) console.log( selectedHTML ) }); document.addEventListener('keyup', function(e){ var selectedHTML, key = e.keyCode || e.which; if( key == 16 ){ // if "shift" key was released selectedHTML = getSelectionHtml(); if( selectedHTML ) console.log( selectedHTML ) } });<ul contenteditable> <li><p>Select <b>this</b> <em>text</em> right <i>here</i></p></li> <li>Or <b>this text</b></li> </ul>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
