JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<form>
  <p>ここにテキストを入力</p>
  <p><input type="text" id="txt" name="txt" size="40"></p>
  <p><span id="msg" class="readonly">&nbsp;</span>
  </p>
  <br>
  <br>
  <br>
  <p>読み取り専用</p>
  <p><input type="text" class="readonly" id="copy" name="copy" size="40" readonly="readonly"></p>

</form>

CSS

.readonly {
  background-color: #e6e6e6;
}

input[type=text] {
  border: solid 1px #bbb;
  padding: 5px;
}

JavaScript

var $txt = $("#txt");
var $copy = $("#copy");
var $msg = $("#msg");
// 非Ascii
var noSbcRegex = /[^\x00-\x7e]+/g;

$txt.on('input', textUpdated);
$txt.on('keypress', keyPressed);
$txt.on('focus', selectOnFocus);

function selectOnFocus(e) {
  $(this).select();
}

function textUpdated(e) {
  var target = $(this);
  if (!target.val().match(noSbcRegex)) {
    copyText();
    return;
  }
  console.log("mutibyte string detected..");
  window.setTimeout(function() {
    target.val(target.val().replace(noSbcRegex, ''));
  }, 1);
  copyText();
}

function copyText() {
  console.log("input");
  $copy.val($txt.val());
}

function keyPressed(e) {
  $msg.text(e.type + " " + e.which);
  console.log(e.type);
  if (e.which >= 37 && e.which <= 40) return;
  if (e.which >= 48 && e.which <= 57) return;
  if (e.which >= 96 && e.which <= 105) return;
  if (e.which == 8 || e.which == 0 || e.which == 9 || e.which == 46) return;
  console.log("key canceled.");
  return false;
}