• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 426
  • Last Modified:

Keyboard events for SPAN

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
tblack1100
Asked:
tblack1100
  • 5
  • 4
  • 2
  • +1
1 Solution
 
ZylochCommented:
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
 
dgelinasCommented:
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
 
dgelinasCommented:
Why would you be using keystrokes to come into the span? Is this a table with tabular data?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
lil_puffballCommented:
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
 
ZylochCommented:
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
 
tblack1100Author Commented:
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
 
lil_puffballCommented:
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
 
tblack1100Author Commented:
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
 
lil_puffballCommented:
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
 
lil_puffballCommented:
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
 
tblack1100Author Commented:
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
 
lil_puffballCommented:
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
 
tblack1100Author Commented:
If that is how the rating system works, I have not problem giving you an A.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 5
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now