Advanced key mapping with keyup instead of keypress in CodeMirror - Javascript CodeMirror

Javascript examples for CodeMirror:Configuration

  1. HOME
  2. Javascript
  3. CodeMirror
  4. Configuration

Description

Advanced key mapping with keyup instead of keypress in CodeMirror

Demo Code

ResultView the demo in separate window 

<!doctype html>
<!--// ww w . ja  va2s  . co m
Created using JS Bin
http://jsbin.com
Released under the MIT license: http://jsbin.mit-license.org
-->
<html>
   <head> 
      <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"> 
      <script src="https://codemirror.net/lib/codemirror.js"></script> 
      <script src="https://codemirror.net/mode/xml/xml.js"></script> 
      <style>
.CodeMirror {background: #eee;}

      </style> 
   </head> 
   <body> 
      <form>
         <textarea id="code" name="code">test</textarea>
      </form> 
      <script>
var tabDown = false;
var myKeyMap = {
  "Tab": function() {}, // Don't do anything on tab
  "Q": function(cm) {
    if (tabDown)
      cm.replaceSelection("Tab-Q hit");
    else
      return CodeMirror.Pass;
  }
}
var code = document.querySelector("#code");
var cm = CodeMirror.fromTextArea(code, {
  extraKeys: myKeyMap
});
addEventListener("keydown", function(e) {
  if (e.keyCode == 9) tabDown = true;
});
addEventListener("keyup", function(e) {
  if (e.keyCode == 9) tabDown = false;
});

      </script>  
   </body>
</html>

Related Tutorials