JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div>
  <label for="">Введите текст<input type="text" id="txt"></label>
  <span id="cf_out"></span>
</div>
<div>
  <label for="">Введите цифры<input type="text" id="cf"></label>
  <span id="txt_out"></span>
</div>

CSS

div{
  border:2px solid black;
  margin:5px 0;
  padding:5px;
}
input{
  width:60%;
  margin-left:30px;
}
label{
  display:block;
}
span{
  margin:20px;
  display:block;
}

JavaScript

$("#txt").on("input",function(){
  $("#cf_out").html("");
  for(var i = 0; i < this.value.length;i++)
  	$("#cf_out").html($("#cf_out").html()+" "+this.value.charCodeAt(i));
})
$("#cf").on("input",function(){
  $("#txt_out").html("");
  var arr = this.value.split(" ");
  for(var i = 0; i < arr.length;i++)
  	$("#txt_out").html($("#txt_out").html()+String.fromCharCode(arr[i]));
});

$("#txt").val("Привет, мир");
$("#cf").val("1055 1088 1080 1074 1077 1090 44 32 1084 1080 1088");
$("#txt")[0].dispatchEvent(new Event("input"))
$("#cf")[0].dispatchEvent(new Event("input"))