Edit in JSFiddle

/*
  
  INPUT: 3053 308c 3089 306f 79c1 305f 3061 306e 751f 6d3b 306e 65e5 3005 3067 3059
  STRING: これらは私たちの生活の日々です
  
*/

var el_input = document.getElementById('input'),
  el_ascii = document.getElementById('ascii'),
  el_hex = document.getElementById('hex'),
  el_string = document.getElementById('string');

el_input.addEventListener('keyup',
  () => {
    el_ascii.innerText = string2ascii(el_input.value);
    el_hex.innerText = string2hex(el_input.value);
    el_string.innerText = hex2string(el_input.value);
  }, false);

function string2ascii(string) {
  return string.split('')
    .map(e => e.charCodeAt(0)).join(' ');
}

function string2hex(string) {
  return string.split('')
    .map(e => e.charCodeAt(0).toString(16)).join(' ');
}

function hex2string(string) {
  return string.split(/\s+/)
    .map(e => String.fromCharCode(parseInt(e, 16))).join('');
}
<input id="input" type="text">
<div id="ascii"></div>
<div id="hex"></div>
<div id="string"></div>
* {
  color: #777;
}

div {
  margin-top: 8px;
}

input[type="text"] {
  width: 256px;
}

div#ascii::before {
  content: "ASCII: ";
  color: #555;
}

div#hex::before {
  content: "HEX: ";
  color: #555;
}

div#string::before {
  content: "STRING: ";
  color: #555;
}