<html>
<head>
<meta charset="UTF-8">
<title>【jQuery】フリガナの自動入力.....</title>
<!--JS--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://shu-naka-blog.com/web/js/jquery.autoKana.js"></script>
</head>
<body>

<form>
  <div>
   <label>お名前</label>
    <input type="text" name="name" placeholder="山田 太郎">
  </div>
  <div> 
   <label>お名前(フリガナ)</label>
   <input type="text" name="kana" placeholder="ヤマダ タロウ">
  </div>  
</form>

</body>
</html>
form {
  width: 100%;
  margin: 0 auto;
  padding: 2em;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

label {display: block;}

input[type="text"] {
  width: 100%;
  padding: .5em;
  font-size: 16px;
  border: solid 2px #cccccc;
  border-radius: 5px;
  box-sizing: border-box;
}

form div + div {margin-top: 1em;}

$(function() {
    $.fn.autoKana('input[name="name"] ', 'input[name="kana"]', {katakana:true});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.