CODEWITHSUNDEEP
javascripthtmlcontenteditable
NomNomCameron
NomNomCameron

Reputation: 469

Prevent text from being erased when it is highlighted in contenteditable element

In a contenteditable h1 tag I am trying to have an event fire when text is highlighted and you press enter WITHOUT the text being erased and a a new line being inserted.

I'm trying to achieve this with the following javascript:

document.bind('keyup', function(ev) {
  if(ev.keyCode == 13) {
    //do something instead of erasing text
    ev.preventDefault();
  }
}

But the highlighted text still seems to have focus, erases and inserts a new line when I press enter.

Is there anyway to prevent this when text is highlighted?

Upvotes: 0

Views: 52

Answers (1)

Tim Down
Tim Down

Reputation: 324647

The keyup event is too late. Do it using the keydown event instead. Also, document.bind is not the correct syntax and will throw an error. You need addEventListener() instead:

document.addEventListener('keydown', function(ev) {
  if(ev.keyCode == 13) {
    //do something instead of erasing text
    ev.preventDefault();
  }
}, false);

Upvotes: 1

Related Questions