JSFiddle - React, Tailwind, and code Playground

by Valder Black

HTML

<div id="main">
  <input id="txt" onkeydown="f1()">
  <div id="reply"><div>
</div>

CSS

#main {margin: 50px 50%;}
#txt {
  width: 60px;
  height: 30px;
  font: bold small-caps 18pt Arial, sans-serif;
  text-align: center;
  border: 4px solid grey;
  border-radius: 5px;
  outline: none;
  transition: 0.8s;
}
#txt:focus {
  border: 4px solid orange;
  transition: 0.5s;
}
#reply {
  padding-top: 15px;
  font: bold 12pt Georgia, sans-serif;
  color: grey;
}

JavaScript

function f1(){$('#txt').val("");}
var a = $('#txt').val();
if($('#txt').val().legth=="") {$('#reply').html("")}
else{
  a=a.replace(/[А-ЯЁ]{1}/gi, "Русский текст");
  $('#reply').html(a);
}


//$('#reply').html(a);