How to identify SPAN at cursor position

Using client-side javascript and dhmtl, how would I determine which SPAN is the container for the text at the current cursor position.  Since the SPAN tag is not a form control, onfocus and onkeydown events arent available.  I have tried to get the window.event srcElement.id in the onkeydown event of the body object, but it returns the editor control and not the SPAN object in the edit control.

I would appreciate any help you could provide.


Thanks,

Tim Black
tblack1100Asked:
Who is Participating?
 
dgelinasCommented:
TRY THIS:  
<span id="hey" onClick="alert('tag = '+event.srcElement.tagName+' id= '+event.srcElement.id);">Click the Span here</span>

<body>
<table width="50%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><span id="hey" onClick="alert('tag = '+event.srcElement.tagName+' id= '+event.srcElement.id);">Click the Span here</span></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
0
 
jaysolomonCommented:
<span id="someName" onclick="alert(this.tagName +'\n'+ this.id);">TEST TEST</span>
0
 
tblack1100Author Commented:
All mouse events work fine.  My problem relates to keyboard events while I'm moving the cursor through text inside a SPAN.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
dgelinasCommented:
Show some code please.

So you have a span inside of an input?
0
 
tblack1100Author Commented:
Basically, I have a 3rd-party html editor control (CuteSoft's htmledit) and when a button is clicked, it places the text I type in a SPAN.  The onmouseover/onmouseout events change the background color of the SPAN as the mouse cursor move over and away from the text in the SPAN.  I want the same effect when I move into and out of the text area with keystrokes.


Thanks,


Tim
0
 
lil_puffballCommented:
Like this you mean?

<body onkeyup="document.forms[0].elements[0].value=document.selection.createRange().parentElement().id;">

<span style="width:100;background-color:pink;" contenteditable id=span1>span 1</span>
<p>
<span style="width:100;background-color:pink;" contenteditable id=span2>span 2</span>

<form>Cursor parent: <input type=text></form>
0
 
lil_puffballCommented:
Or this?

<input type=text value="Click on me and Press Tab">
<span style="width:100;background-color:pink;" contenteditable id=span1
onmouseover="this.style.backgroundColor='yellow';"
onfocus="this.style.backgroundColor='yellow';"
onmouseout="this.style.backgroundColor='pink';"
onblur="this.style.backgroundColor='pink';"
>
span 1</span>
0
 
PhrogzCommented:
Three ways:

1) Track the onmouseover for each span (or better, track it for the parent container, and look at the event.target||event.srcElement to figure out which span is active.

2) For IEWin only, use the elementFromPoint() method to find it. (See: http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/elementfrompoint.asp)

3) Use something like my FindXYWH function (http://phrogz.net/JS/FindXY_js.txt) to figure out the bounds for every span on the page (or in the interesting area) and loop through them to see if they intersect with the cursor location.
0
 
PhrogzCommented:
I object, given that many in here have given valuable advice, myself included. I may not have written the code for the original poster, but I have offered three viable methods to accomplish the goal.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.