Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to identify SPAN at cursor position

Posted on 2004-04-30
11
Medium Priority
?
1,415 Views
Last Modified: 2012-06-21
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
0
Comment
Question by:tblack1100
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +2
11 Comments
 
LVL 6

Accepted Solution

by:
dgelinas earned 500 total points
ID: 10962668
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
 
LVL 16

Assisted Solution

by:jaysolomon
jaysolomon earned 500 total points
ID: 10962792
<span id="someName" onclick="alert(this.tagName +'\n'+ this.id);">TEST TEST</span>
0
 

Author Comment

by:tblack1100
ID: 10962847
All mouse events work fine.  My problem relates to keyboard events while I'm moving the cursor through text inside a SPAN.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 6

Expert Comment

by:dgelinas
ID: 10962872
Show some code please.

So you have a span inside of an input?
0
 

Author Comment

by:tblack1100
ID: 10962977
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
 
LVL 12

Assisted Solution

by:lil_puffball
lil_puffball earned 500 total points
ID: 10963977
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
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10963990
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
 
LVL 2

Assisted Solution

by:Phrogz
Phrogz earned 500 total points
ID: 10968373
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
 
LVL 2

Expert Comment

by:Phrogz
ID: 11360468
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question