Solved

How to identify SPAN at cursor position

Posted on 2004-04-30
11
1,408 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
  • 2
  • 2
  • 2
  • +2
11 Comments
 
LVL 6

Accepted Solution

by:
dgelinas earned 125 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 125 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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 125 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 125 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

785 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