asked on

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

ASKER CERTIFIED SOLUTION

dgelinas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

jaysolomon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

tblack1100

ASKER

All mouse events work fine. My problem relates to keyboard events while I'm moving the cursor through text inside a SPAN.

dgelinas

Show some code please.

So you have a span inside of an input?

tblack1100

ASKER

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

SOLUTION

lil_puffball

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lil_puffball

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>

SOLUTION

Phrogz

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Phrogz

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.