Solved

Keyboard events for SPAN

Posted on 2004-04-30
14
419 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
Suggested Courses
Course of the Month11 days, 16 hours left to enroll

623 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