Solved

How to identify SPAN at cursor position

Posted on 2004-04-30
11
1,409 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Dynamic Dropdowns 15 32
how can i get the sole odd and th sole even 2 33
how can i make 2 columns? 4 36
Character counter breaks after adding EmojiOne Area 4 19
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

792 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