html - Get text offset from click event via Javascript? - Stack Overflow

admin管理员组

文章数量:1323715

So I have searched all over trying to figure out how to do the following and have yet to find a solution:

I need to get the text offset for a given HTML element from a click event. This means that if I have the following HTML

<p>This is a really cool paragraph</p>

and a user clicks on the first 'a' in the sentence, the text offset would be 8 seeing as the first 'a' is at index 8 if we take the 'T' in 'This' as index 0.

I need this information so that I may programmatically create a text selection based on where a user clicks. As of right now I can track which HTML elements are clicked on and thus I can create this sort of activity at a HTML-element level granularity, but I'd like to have finer control than that.

Thank you!

So I have searched all over trying to figure out how to do the following and have yet to find a solution:

I need to get the text offset for a given HTML element from a click event. This means that if I have the following HTML

<p>This is a really cool paragraph</p>

and a user clicks on the first 'a' in the sentence, the text offset would be 8 seeing as the first 'a' is at index 8 if we take the 'T' in 'This' as index 0.

I need this information so that I may programmatically create a text selection based on where a user clicks. As of right now I can track which HTML elements are clicked on and thus I can create this sort of activity at a HTML-element level granularity, but I'd like to have finer control than that.

Thank you!

• javascript
• html
• dom

Share Improve this question Follow asked Dec 5, 2011 at 20:15 MoarCodePlzMoarCodePlz 5,17622 gold badges2626 silver badges3131 bronze badges 0

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

Copied from your ment in another answer:

I'm currently trying to simulate human behavior via Javascript which is turning out to be a bit more difficult than I anticipated (most likely by design).

What you want is Selenium, for web browser automation: http://seleniumhq/

Using Prototype:

<p id='mytext'>This is a really cool paragraph</p>
<script type='text/javascript'>
   var characters = $('mytext').textContent;
   var newchars = '';
   for(I = 0;I < chars.length;I++) {
      newchars += '<span id="char_' + I + '">' + chars[I] + '</span>';
   }
   $('mytext').textContent = newchars;
   Event.observe($('mytext'), 'click', function(e) {
      var spanID = (e.findElement('span')).getAttribute('id')
      var index = spanID.split('_')[1]; // Ta-daaa!
   });
</script>

Please don't do this for large blocks of text (or, preferably, at all). It creates a DOM node for every character, and can slow the browser down...

I don't think there's anything built in for that. Any solution will be a hack and unreliable.

What you can do is use the selection API to get a user selection on a page, which sounds like you can do.

Just throwing this out there as a possible hack/solution.

You could try using the mouse offsetX and offsetY when a click occurs and simulate a double click dblclick in that location, effectively selecting the text and then using the selection API to get the word they clicked. Wouldn't work to the letter, but might work to the word.

Append each letter inside a span tag and onClick event just extract the letter inside the span tag and may be keep reference with some attributes in the span tag for tracking the index of the position for each of the element.But this approach would be redundant.

Try window.getSelection() ...I'm not sure if it works in all browsers, but at least Chrome seems to create a Selection object with the offset you need.

本文标签： htmlGet text offset from click event via JavascriptStack Overflow