What's a good way to catch keystrokes and attach functions to them?

JavaScript
1

Currently I’m doing something like this:

document.onkeydown = function(e) 
{

  //SHIFT+TAB - Outdent two spaces
  if (e.shiftKey && e.keyCode === 9) 
  {
    //alert('Tab Outdent');
    tab_outdent(code_editor_instance);
    return false;
  }
  else
  //TAB - Indent two spaces
  if (e.keyCode === 9) 
  {
    //alert('Tab Indent');
    tab_indent(code_editor_instance);
    return false;
  }
  else
  //SHIFT+DEL - Delete existing line
  if (e.shiftKey && e.keyCode === 46) 
  {
    //alert('Delete Existing Line');
    line_delete(code_editor_instance);
    return false;
  }
  else
  //CTRL+D - Duplicate current line
  if (e.ctrlKey && e.keyCode === 68) 
  {
    //alert('Duplicate Current Line');
    line_duplicate(code_editor_instance);
    return false;
  } 
};

But this technique seems to be causing me issues if the keystroke calls a function which tries to adjust the innerHTML of a Div (see this: Browser is getting confused with .innerHTML being updated - #5 by wh33t)

So I’m thinking there is probably a better to catch keystrokes. Just not sure what is easiest, best.

2

No need to create a new thread with the same question.

The problem you’re having is as I described in the other thread, the caret position is getting set to the beginning of the element when setting the innerHTML property in Firefox. It doesn’t have anything to do with the onkeydown event.

You can experiment with the different key events(keydown, keypress, and keyup) and you should probably use addEventListener with the element rather than listening in the whole page.

The best event to use here is input, which fires when the content changes but not other keypresses like arrows, shift, control etc… but it doesn’t have great support just yet.

editor.addEventListener('input', function(event) {
  // ...
}, false)
3

Thanks for the advice.

You must have missed the part where I said the code you wrote works fine for me until I attach it to the onkeypress event.

The issue isn’t simply that the caret doesn’t appear back in the DIV, even if I manually click in the div somewhere to alter the text I cannot, it’s like it turns into readonly. It is a very strange issue and only occurs when it’s run from the keypress.

I figured the issue was no longer the innerHTML issue I thought it was, but now something related to the keypress, so I thought it might be useful to create a new thread.

How would I fire off a function using the above? How would I detect ctrlkey and a letter for example?

4

it sounds like onkeydown is firing before the content has been updated in the div or that you are preventing the default action of the event. Provide a working demo that shows what you’re describing.

How would I fire off a function using the above? How would I detect ctrlkey and a letter for example?

editor.addEventListener('input', function(e) {
 // your code goes here
}, false)

or

var updateContent = function(e) {
  // your code goes here
}
editor.addEventListener('input', updateContent, false)
5 
<html>
  <head>
  </head>
  <body>
<div id="code_editor" contenteditable="true" style="border: 1px solid black;">
Content Editable Div Right here
</div>
<script>
//Add listener
document.getElementById('code_editor').addEventListener('input', keypress , false);

//Update the syntax
function syntax_update()
{
  document.getElementById('code_editor').innerHTML = 'Are you able to edit the text still?';
}

//Deal with keypress
function keypress(e)
{
  syntax_update();
}
</script>
  </body>
</html>
6

Yes, that’s doing what I would expect.

Every time you change the input you set it’s contents back to ‘Are you able to edit the text still?’, don’t you see how that would make it appear like it’s readonly?

1 Like
7

Yes, I do get that now.

Upon further investigation I realize I was getting confused as I actually have a function that sets the caret position, but when I was running it it was telling me that I was trying to set the position higher than the length of the textContent which foolishly made me feel like textContent was being decoupled from innerHTML somehow.

Upon even further investigation I realized it was because I’m using firstChild, which worked fine until syntax_update adds in html tags. The first html tag becomes the first node and of course it’s length is going to be short.

function caret_position_set(code_editor_instance, caret_position)
{
  if(code_editor_instance.textContent.length > 0)
  {
    //console.log('code_editor.contentText: ' + code_editor.contentText);
    //console.log('code_editor.firstChild.length: ' + code_editor.firstChild.length);
    //console.log('code_editor.firstChild.wholeText: ' + code_editor.firstChild.wholeText);
    
    //Insure we don't try to set the caret position to anything greater than the length of the textContent
    if(caret_position > code_editor_instance.textContent.length)
    {
      caret_position = code_editor_instance.textContent.length;
    }

    var sel = window.getSelection();
    sel.collapse(code_editor_instance.firstChild, caret_position);
  }
}

Thanks a lot for your help. I don’t often write Javascript (more of a PHP/Mysql guy) and I knew it would take me a few posts to fully explain what issue I was having as I didn’t even really understand it myself.

I’m now googling up solutions to the issue I’m having and none of them look simple or straight forward. I see why web IDE’s aren’t that common place yet.

8

Yes, that’s where I was getting at in the other thread that you should adopt other projects and not write your own, it is very, very complicated.

1 Like
9

Haha yeah. Foolishly hopeful here. I’m gonna keep going on it though. Thanks for your advice and patience.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.