<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});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.