Search code examples
javascriptjqueryonkeyup

onkeyup event on HTML contenteditable element return undefined

I'm trying to bind div element text value, based on another text of div contenteditable element using onkeyup event like below :

var input = document.getElementById('editor');

    input.onkeyup = function() {
  document.getElementById('console').innerHTML = input.text;
  }

and here's my markup :

<div id="editor" contenteditable>text here</div>

<div id="console"></div>

Or here's the demo

But it's not working. I want any text we typing on that contenteditable div element is also changed directly on <div id="console"></div>

I'm sorry to give you confusing explanation, Hope you guys understand my question and my question is how can i solve this thing? or any idea?

Solution

  • The problem is input.text. HTML Elements don't have a property named text, so when you get the value, it's undefined. Maybe you want innerText?

    var input = document.getElementById('editor');

input.onkeyup = function() {
  console.log(input.innerText)
  document.getElementById('console').innerHTML = input.innerText;
}
    <div id="editor" contenteditable>Type here</div>

<div id="console"></div>