?
Solved

Capturing onkeydown event

Posted on 2005-03-31
9
Medium Priority
?
8,926 Views
Last Modified: 2008-01-09
First off all, in this question I'm looking for a solution that only has to work in Internet Explorer on PCs.

In the editable div in the code below, my users will create a bullet list. They should be able to do this only by using their keyboard. Examples: Presssing the enter key automatically creates a new bullet, press on the tabulator key should transform the current bullet into a sub bullet and shift+tab should do the oposite thing. I.e. It should work exactly as it does in Microsoft Word which is a program my users are familiar with.  

The whole purpose of this tool is to give them a quick way of creating a "folder tree". I will parse through all the nodes afterwards, finding parent nodes, child nodes etc. and insert them into the database.

THE PROBLEM
In order to perform the keybard actions, e.g. tabulator to transform current bullet into sub bullet, I need to know which <LI> element the cursor is currently on. How do I accomplish this? I have tried to create an onkeydown event for the LI elements, but they never fires.

Here's the code:

    <script type="text/javascript">
    var activeElement = false; // Variable where a reference to the active <LI> is saved.
    function checkWizardShortcut(obj){   // Called on every keydown event       
          var e = event;       
          if(activeElement)alert(activeElement.tagName); // Debugging
            if(e.keyCode==9){      // Cancel tabulator            
                  return false;
            }
            if(obj.innerHTML.indexOf('<LI>')<0){      // No bullet exists - create one
                  obj.innerHTML = '<UL><LI>';
            }
            document.getElementById('contentHTML').innerHTML = obj.innerHTML.replace(/</g,'&lt;');      // Debugging - show HTML code
          return true;
    }  
   
    function initWizard(){
          var divObj = document.getElementById('wizardContent');
          var liObj = divObj.getElementsByTagName('LI'); // Getting all LI elements
          for(var no=0;no<liObj.length;no++){ // Loop through all <LI> elements and assign onkeydown events
                liObj[no].onkeydown=setWizardActiveElement; // THIS EVENT NEVER FIRES               
          }  
    }
   
    function setWizardActiveElement(){ // Should be called when a key is pressed
          alert(this.tagName);      // Debugging
          activeElement = this;  //   Setting current <LI> as activeElement
    }
   
    </script>
                      <div id="wizardContent" onkeydown="initWizard();return checkWizardShortcut(this);"  style="padding:10px;width:710px;height:600px;margin-top:10px;background-color:#FFFFFF;border:1px solid #000000" contenteditable=true><ul><li>Line 1</li></ul></div>
<div id="contentHTML"></div>

0
Comment
Question by:Batalf
[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
9 Comments
 
LVL 15

Assisted Solution

by:SnowFlake
SnowFlake earned 1000 total points
ID: 13669786
A not yet tested Idea would be to use a combination of contains
and selection.

itterate over the LI's In th di and see if they contain the selection.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1000 total points
ID: 13669788
event.srcElement???
0
 
LVL 32

Author Comment

by:Batalf
ID: 13669851
Thank you both, but I just figured it out

I can reate a range. The parent element of the range is the current LI.

<html>
<body>
<script type="text/javascript">
    var activeElement = false; // Variable where a reference to the active <LI> is saved.
    function checkWizardShortcut(obj){   // Called on every keydown event      
         var e = event;    

         if(activeElement)alert(activeElement.tagName); // Debugging
          if(e.keyCode==9){     // Cancel tabulator          
               return false;
          }
          if(obj.innerHTML.indexOf('<LI>')<0){     // No bullet exists - create one
               obj.innerHTML = '<UL><LI>';
          }
          document.getElementById('contentHTML').innerHTML = obj.innerHTML.replace(/</g,'&lt;');     // Debugging - show HTML code
         return true;
    }  
   
    function captureElement(){
         var r = document.selection.createRange();      
             activeElement = r.parentElement();  
             self.status = activeElement.innerHTML;
    }
   
    </script>
<div id="wizardContent" onkeydown="captureElement();" style="padding:10px;width:710px;height:600px;margin-top:10px;background-color:#FFFFFF;border:1px solid #000000" contenteditable=true><ul><li>Line 1</li></ul></div>
<div id="contentHTML"></div>
</body>
</html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13669872
Thanks for the points but perhaps a PAQ and refund is in order ?

0
 
LVL 32

Author Comment

by:Batalf
ID: 13669912
I don't mind. I thought I could give you the points as credit for your fast response.

And since there's a solution to the problem, even though I gave it my self, I thought it was OK.

You know better than me what the proper procedure is here:-)

But if possible, I would like to you to have the points. I have unlimited points anyway so a refund doesn't make much difference to me.

Batalf
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13670358
Thanks :) It is more for the quality of the database that people do not concentrate on the comment I gave but rather the comment you gave detailing the solution

Michel
0
 
LVL 32

Author Comment

by:Batalf
ID: 13670612
************************************************************************
*                                                                                                                                            *
*                                                                                                                                            *
*                         S O L U T I O N    T O    T H I S    P R O B L E M                                              *
*                                                                                                                                            *
*                                                                                                                                            * ************************************************************************          

The solution to the problem in this question was this:

var r = document.selection.createRange();    
activeElement = r.parentElement();  


i.e.

1) Creating a range
2) Get the parentElement of the range which is the <LI> tag where the cursor is located.

Batalf

   
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 13670814
:D
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

762 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