ansaurus

Question

Answer 1

+1 A:

<html>
<head>
<script type="text/javascript">
function load(){
  window.document.designMode = "On";
  //run this in a button, will highlight selected text
  window.document.execCommand("hiliteColor", false, "#000");
}
</script>
</head>
<body contentEditable="true" onload="load()">
  this is text
</body>
</html>

foobar 2008-11-20 23:02:24

This is easily the best idea. Good answer, but it would really be an idea to turn `designMode` off again afterwards.

Tim Down 2010-01-11 21:18:51

Answer 2

A:

A possibility that works (although really, really, really slow) is to insert around every letter some kind of id. <div>A<span>#23125#</div></span> Of course you'd have to hide it, maybe by setting it's overflow to none and it's max-width to 1em. (That would of course give interesting results for C&P.) Then it would be possible to find the selection and highlight it.

Maybe you could also track the mouse where it's mousedown and mouseup events are and establish the selected region. Then you could create a on top of the found rectangle.

But really, I can't see a useful method beside the one foobar proposed for the Internet Explorer.

Georg 2008-11-25 12:41:50

Answer 3

+2 A:

Well, you can do it using DOM manipulation. This works in Firefox:

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var newNode = document.createElement("span");
newNode.setAttribute("style", "background-color: pink;");
range.surroundContents(newNode);

Seems to work in the current version of Safari as well. See https://developer.mozilla.org/en/DOM/range.surroundContents and http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html

Cugel 2008-11-25 13:53:30

Answer 4

A:

Hi, I am trying to display the selected text in an alert box in Mozilla Firefox. This is my following code:

var selection = window.getSelection(); alert(selection.toString());

However, nothing is being displayed when the user highlights the text on a web page and clicks the button (to execute the above function).

any reason why?

In addition I tried the code suggested by Cugel but doesn't work either!

Any input would be greatly appreciated.

Kind regards

Chris

2009-03-10 17:32:39

ansaurus

tags:

views:

answers:

javascript user selection highlighting

related questions