Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    key manipulation?

    Hi how can I manipulate the keys? For example, when I press the E key, it will respond as if I had pressed the Enter key?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    Can you elaborate on what exactly you want to do?

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    you can't (as far as I can tell) directly trigger key events any more, for security reasons - although I think jQuery has this still.

    you can go the long way around, however, using the selection ranges on the text area...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <textarea id="ta">Hello</textarea>
    <script>
    document.getElementById("ta").onkeydown=function(e){
    var event = window.event ? window.event : e;
    if(event.keyCode==33){
    var r =getCursor(); 
    setCursor(r+1,r+1);
    return false;
    }
    if(event.keyCode==34){
    var r =getCursor(); 
    setCursor(r-1,r-1);
    return false;
    }
    
    }
    
    function setCursor(st, end) {
    var el=document.getElementById("ta");
        if (el.setSelectionRange) {
            el.focus();
            el.setSelectionRange(st, end);
        } else {
            if (el.createTextRange) {
                range = el.createTextRange();
                range.collapse(true);
                range.moveEnd('character', end);
                range.moveStart('character', st);
                range.select();
            }
        }
    }
    
    function getCursor() {
    var el=document.getElementById("ta");
      if (el.selectionStart) { 
        return el.selectionStart; 
      } else if (document.selection) { 
        el.focus(); 
    
        var r = document.selection.createRange(); 
        if (r == null) { 
          return 0; 
        } 
    
        var re = el.createTextRange(), 
        rc = re.duplicate(); 
        re.moveToBookmark(r.getBookmark()); 
        rc.setEndPoint('EndToStart', re); 
    
        var add_newlines = 0;
        for (var i=0; i<rc.text.length; i++) {
          if (rc.text.substr(i, 2) == '\r\n') {
            add_newlines += 2;
            i++;
          }
        }
    
        return rc.text.length - add_newlines; 
      }  
      return 0; 
    }
    
    </script>
    </body>
    </html>

  • #4
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    This is great, just one more thing.. How can I call all Textareas and Input Fields instead of just "ta"? I tried document.getElementsByTagName("textarea,input") but no luck.. So I want to use this same script but just apply it to all textareas and input fields instead of "ta"?

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,876
    Thanks
    56
    Thanked 536 Times in 533 Posts
    no, that won't work, but querySelectorAll does. Try this. It assumes that the only inputs that will be receiving key events are the text inputs. If not, you would want to make sure that all your text inputs have type="text" (this isn't otherwise necessary because that's the default) and change your selector to var all=document.querySelectorAll("input[type='text'], textarea");
    Code:
    <script>
    var all=document.querySelectorAll("input, textarea");
    
    for (var i=0; i<all.length; i++) {
    all[i].onkeydown=function(e){
    var event = window.event ? window.event : e;
    var elem = event.target ? event.target : event.srcElement;
    if(event.keyCode==33){
    var r =getCursor(elem); 
    setCursor(r+1,r+1,elem);
    return false;
    }
    if(event.keyCode==34){
    var r =getCursor(elem); 
    setCursor(r-1,r-1,elem);
    return false;
    }
    
    }
    }
    
    function setCursor(st, end, el) {
        if (el.setSelectionRange) {
            el.focus();
            el.setSelectionRange(st, end);
        } else {
            if (el.createTextRange) {
                range = el.createTextRange();
                range.collapse(true);
                range.moveEnd('character', end);
                range.moveStart('character', st);
                range.select();
            }
        }
    }
    
    function getCursor(el) {
      if (el.selectionStart) { 
        return el.selectionStart; 
      } else if (document.selection) { 
        el.focus(); 
    
        var r = document.selection.createRange(); 
        if (r == null) { 
          return 0; 
        } 
    
        var re = el.createTextRange(), 
        rc = re.duplicate(); 
        re.moveToBookmark(r.getBookmark()); 
        rc.setEndPoint('EndToStart', re); 
    
        var add_newlines = 0;
        for (var i=0; i<rc.text.length; i++) {
          if (rc.text.substr(i, 2) == '\r\n') {
            add_newlines += 2;
            i++;
          }
        }
    
        return rc.text.length - add_newlines; 
      }  
      return 0; 
    }
    
    </script>

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,030
    Thanks
    0
    Thanked 247 Times in 244 Posts
    You can optimize it and avoid loops by using event delegation. You attach the event to the container (e.g. form) of the input controls just once and in the handler you can determine which element triggered the event.

    Code:
    document.forms[0].onkeydown = function(e) {
        e = e || window.event;
        var el = e.target || e.srcElement;
        if ((el.tagName === 'INPUT' && el.type === 'text') || el.tagName === 'TEXTAREA') {
            //do something
        }
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •