Solved

How to identify SPAN at cursor position

Posted on 2004-04-30
11
1,405 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
Comment Utility
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
Comment Utility
<span id="someName" onclick="alert(this.tagName +'\n'+ this.id);">TEST TEST</span>
0
 

Author Comment

by:tblack1100
Comment Utility
All mouse events work fine.  My problem relates to keyboard events while I'm moving the cursor through text inside a SPAN.
0
 
LVL 6

Expert Comment

by:dgelinas
Comment Utility
Show some code please.

So you have a span inside of an input?
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Author Comment

by:tblack1100
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Change text when typing into field 2 20
Auto Submit on dropdown box 14 28
Problem to picture file 3 38
getting id from database 5 24
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now