<input type="text" placeholder="全角英数字を半角に変換する">
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

input {
  padding: 0.5rem;
  width: 20rem;
}
var input = document.querySelector("input");

input.addEventListener("keyup", (e) => {
  if (e.keyCode === 13) {
    input.value = zenkaku2hankaku(input.value);
  }
});

function zenkaku2hankaku(val) {
  var regex = /[A-Za-z0-9!"#$%&'()*+,-./:;<=>?@[\]^_`{|}]/g;

  // 入力値の全角を半角の文字に置換
  value = val
    .replace(regex, function(s) {
      return String.fromCharCode(s.charCodeAt(0) - 0xfee0);
    })
    .replace(/[‐-―]/g, "-") // ハイフンなど
    .replace(/[~〜]/g, "~") // チルダ
    .replace(/ /g, " "); // スペース

  return value;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.