Select the text in the element (similar to highlighting with the mouse)

Select is how you drag your mouse over the text to select it. This has always been a burden of research, as everyone talks about "selection" or "highlighting" in other terms.

Is that possible? So far, my code:

HTML:

<a href="javascript:" onclick="SelectText('xhtml-code')">Select Code</a> <code id="xhtml-code">Some Code here </code>

JS:

function SelectText(element) { $("#" + element).select(); }

Did I miss anything obviously?

#1 building

Add jQuery.browser.webkit to Chrome's "other.". Can't function properly in Chrome 23.

Make this script below to select a class="code" in the < pre > tag.

jQuery( document ).ready(function() { jQuery('pre.code').attr('title', 'Click to select all'); jQuery( '#divFoo' ).click( function() { var refNode = jQuery( this )[0]; if ( jQuery.browser.msie ) { var range = document.body.createTextRange(); range.moveToElementText( refNode ); range.select(); } else if ( jQuery.browser.mozilla || jQuery.browser.opera || jQuery.browser.webkit ) { var selection = refNode.ownerDocument.defaultView.getSelection(); console.log(selection); var range = refNode.ownerDocument.createRange(); range.selectNodeContents( refNode ); selection.removeAllRanges(); selection.addRange( range ); } else if ( jQuery.browser.safari ) { var selection = refNode.ownerDocument.defaultView.getSelection(); selection.setBaseAndExtent( refNode, 0, refNode, 1 ); } } ); } );

#2 building

Jason's code cannot be used for elements in iframe (because the scope is different from windows and documents). I solved this problem and modified it to use as any other jQuery plug-in (linkable):

Example 1: just click to select all the text in the < code > tag and add the "selected" class:

$(function() { $("code").click(function() { $(this).selText().addClass("selected"); }); });

Example 2: when you click a button, select an element in iframe:

$(function() { $("button").click(function() { $("iframe").contents().find("#selectme").selText(); }); });

Note: remember that the iframe source should be in the same domain to prevent security errors.

jQuery plug-in:

jQuery.fn.selText = function() { var obj = this[0]; if ($.browser.msie) { var range = obj.offsetParent.createTextRange(); range.moveToElementText(obj); range.select(); } else if ($.browser.mozilla || $.browser.opera) { var selection = obj.ownerDocument.defaultView.getSelection(); var range = obj.ownerDocument.createRange(); range.selectNodeContents(obj); selection.removeAllRanges(); selection.addRange(range); } else if ($.browser.safari) { var selection = obj.ownerDocument.defaultView.getSelection(); selection.setBaseAndExtent(obj, 0, obj, 1); } return this; }

I tested it in IE8, Firefox, Opera, Safari, Chrome (current version). I'm not sure if it works with older versions of IE (because I don't care).

#3 building

This is a version without browser sniffing and does not rely on jQuery:

function selectElementText(el, win) { win = win || window; var doc = win.document, sel, range; if (win.getSelection && doc.createRange) { sel = win.getSelection(); range = doc.createRange(); range.selectNodeContents(el); sel.removeAllRanges(); sel.addRange(range); } else if (doc.body.createTextRange) { range = doc.body.createTextRange(); range.moveToElementText(el); range.select(); } } selectElementText(document.getElementById("someElement")); selectElementText(elementInIframe, iframe.contentWindow);

#4 building

Tim's method is very suitable for my situation - after replacing the following statements, select the text in div for IE and FF:

range.moveToElementText(text);

It has the following contents:

range.moveToElementText(el);

Select the text in the div by clicking with the following jQuery function:

$(function () { $("#divFoo").click(function () { selectElementText(document.getElementById("divFoo")); }) });

#5 building

My special use case is to select a text range within an editable span element, and as far as I know, none of the answers here are described.

The main difference is that you have to pass a node of type Text to a Range object, such as Described in the document for Range.setStart() :

If startNode is a Node of type Text, Comment or CDATASection, startOffset is the number of characters starting from startNode. For other Node types, startOffset is the number of child nodes between the start of startNode.

The Text node is the first child of the span element, so to get it, visit childNodes[0] of the span element. The rest are the same as most other answers.

Here is a code example:

var startIndex = 1; var endIndex = 5; var element = document.getElementById("spanId"); var textNode = element.childNodes[0]; var range = document.createRange(); range.setStart(textNode, startIndex); range.setEnd(textNode, endIndex); var selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range);

Other relevant documents:
Range
Selection
Document.createRange()
Window.getSelection()

5 February 2020, 02:07 | Views: 9768