Solved

Keyboard events for SPAN

Posted on 2004-04-30
14
412 Views
Last Modified: 2012-06-27
I have a 3rd-party html editor control (CuteSoft's htmledit), which allows you to add a custom button and button click event.  I have a button that places text in a SPAN object when clicked.  The id of the SPAN begin with "mt__" and the onmouseover/onmouseout events call javascripts that 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
Comment
Question by:tblack1100
  • 5
  • 4
  • 2
  • +1
14 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 10963761
If I understand your question, your <SPAN> tag has onmouseover and onmouseout to change the background of the text inside the span. If you have a textarea, the whole textarea would change it's background color and not just the text:

<textarea class="something" onmouseover="this.style.bgcolor='red';" onmouseout="this.style.bgcolor='white';">Some text you put into the textarea using JavaScript or something</textarea>

You should change the 'red' to some other color.

Also, there are several options. In your textarea, the scrollbars always show, to disable them, in the your stylesheet or in the HEAD section of the webpage, type:

<style type="text/css">
textarea.something {overflow:hidden;}
</style>

To also display no border around the texarea, add

<style type="text/css">
textarea.something {overflow:hidden;border:0px;}
</style>

Where the .something is the class name you put inside you textarea.

--Zyloch
0
 
LVL 6

Expert Comment

by:dgelinas
ID: 10963793
Zylock he's looking for when you use keystrokes not mouse events.

tblack1100:  your best bet is to paste code for us to work with.
0
 
LVL 6

Expert Comment

by:dgelinas
ID: 10963809
Why would you be using keystrokes to come into the span? Is this a table with tabular data?
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10963927
Like this you mean? (I'm taking it you mean hilight when the user uses the tab key?)

<textarea onmouseover="this.style.backgroundColor='yellow';" onfocus="this.style.backgroundColor='yellow';" onmouseout="this.style.backgroundColor='white';" onblur="this.style.backgroundColor='white';">
Text</textarea>
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 10963928
Oh... I see... To echo dgelinas' question, why do you need keystrokes to go into span? If you're talking about tabbing, which I'm not sure how you'll accomplish with SPAN, you can use onFocus or onBlur, but dgelinas is right, tis best if you post code for us to work with.

--Zyloch
0
 

Author Comment

by:tblack1100
ID: 10977079
It's not a textarea object, it is an html edit control and the SPAN objects are placed in the html content being edited as special visual bookmark.  When they are clicked on (or moved into with keystrokes) I need the mouse or key event to fire so I know the user is within the SPAN.  The SPAN has a special id assigned to it when it is created, so they can all be identified easily.  If I cant use a key event to determine whether or not I am in a SPAN, what about being able to know whether the text at the keyboard cursor position is in a parent container?

Thanks
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.

 
LVL 12

Expert Comment

by:lil_puffball
ID: 10981089
If it is a contenteditable span, you should be able to do exactly the same thing as you do with normal textareas. (i.e. you can use the onfocus and oblur event handlers.) When you say "moved into with keystrokes", do you mean when the user presses the tab button?
0
 

Author Comment

by:tblack1100
ID: 10986509
No, it is not an editable span area...it is a span within an editable content area.  Just as if you were creating a web page in a web page editor and placed a chunk of text in a span to control font or format.  You could assign mouse event handlers to the span, but not keyboard event handlers.  Unlike a display-only web page, my html content is in an end-user editing area that allows keyboard movement through the content.  If the user performs any edit while in one of my special span areas, I need different things to happen.  The only way I can implement this is to know when they move into and out of the span.  If they move in and out with the mouse it's a no-brainer.  However, a span can't have focus or keyboard events.  Any keyboard events that take place while the end-user is editing text within my span is bubbled up to the parent document.


Thanks
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 10990542
Hmm...I sort of understand now but not completely. It would help if you can post a link to your current code so we can see exactly how your spans are set up... :)
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 500 total points
ID: 10990738
Perhaps this is what you mean?

<script>
var prev=null;
function setHili(){
if(prev){prev.style.backgroundColor='white';prev=null;}
var obj=document.selection.createRange().parentElement();
if(obj.nodeName.toLowerCase()=='span'){prev=obj;obj.style.backgroundColor='yellow';}
}
</script>

<div style="border:1 black solid;height:50%;" contenteditable=true onkeydown="setHili();">

<span
onmouseover="this.style.backgroundColor='yellow';"
onmouseout="this.style.backgroundColor='white';">
Span 1</span>

<span
onmouseover="this.style.backgroundColor='yellow';"
onmouseout="this.style.backgroundColor='white';">
Span 2</span>

</div>
0
 

Author Comment

by:tblack1100
ID: 11070709
Thanks to everyone for their input and  assistance and lil puffball for a workable solution.  Only minor tweaking was required to utilize your suggestion.
0
 
LVL 12

Expert Comment

by:lil_puffball
ID: 11072132
Glad to help. :) But is there a reason for the B? :( If only minor tweaking was necessary, an A should be given. After all us experts can only guess what the asker wants, so unless you provide entire code, we are unable to give you an EXACT answer.
0
 

Author Comment

by:tblack1100
ID: 11098066
If that is how the rating system works, I have not problem giving you an A.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
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…

707 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

15 Experts available now in Live!

Get 1:1 Help Now