JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" class="editor" id="div0">
Begin <span class="label" contenteditable="false">Hello</span> world
</div>

CSS

.editor {
    width: 300px;
    height: 200px;
    border: solid 1px black;    
}

.label {
    background: #eee;
    border-radius: 10px;
    padding: 0 5px;    
}

JavaScript

document.getElementById("div0").onkeyup = alertkey;

//now create the event handler function to process the event
function alertkey(e) {
  if( !e ) {
    //if the browser did not pass the event information to the
    //function, we will have to obtain it from the event register
    if( window.event ) {
      //Internet Explorer 8-
      e = window.event;
    } else {
      //total failure, we have no way of referencing the event
      return;
    }
  }
  if( typeof( e.keyCode ) == 'number'  ) {
    //DOM
    e = e.keyCode;
  } else if( typeof( e.which ) == 'number' ) {
    //NS 4 compatible, including many older browsers
    e = e.which;
  } else if( typeof( e.charCode ) == 'number'  ) {
    //also NS 6+, Mozilla 0.9+
    e = e.charCode;
  } else {
    //total failure, we have no way of obtaining the key code
    return;
  }
  //console.log('== The key pressed has keycode ' + e.val());
  //console.log('The key pressed has keycode ' + e +
  //  ' and is key ' + String.fromCharCode( e ) );
}