?
Solved

Capturing onkeydown event

Posted on 2005-03-31
9
Medium Priority
?
8,951 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
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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

616 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