今回は、ユーザーがフォームに入力した際に、JavaScriptで動的に全角・半角を変換するスクリプト作成したので、忘れないようにメモっておきます。
日本語特有の問題とも言えなくもないが、入力フォームを構築する上でよくある全角・半角の問題。
前回、正規表現の記事の時にも書きましたが、ユーザーは基本的に自由に入力できるので、それをJavaScriptで自動的に変換します。
目次
英字・数字・記号を変換
PHPでは[mb_convert_kana()]関数が用意されていますが、JavaScriptでは正規表現を利用して全角・半角を変換します。
少々面倒ですが、後に記述するカタカナの全角・半角の変換よりは比較的簡単です。
全角英数字を半角英数字に変換
1 2 3 4 5 |
function toHalfWidth(elm) { return elm.value.replace(/[A-Za-z0-9!-~]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)-0xFEE0); }); } |
半角数字を全角数字に変換
1 2 3 4 5 |
function toFullWidth(elm) { return elm.value.replace(/[A-Za-z0-9!-~]/g, function(s){ return String.fromCharCode(s.charCodeAt(0)+0xFEE0); }); } |
Qiita
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwalF1ZXJ5JUUzJTgwJTkxaW5wdXQlRTMlODElQUUlRTUlODUlQTglRTglQTclOTIlRTYlOTUlQjAlRTUlQUQlOTclRTMlODMlQkIlRTUlODUlQTglRTglQTclOTIlRTMlODIlQTIlRTMlODMlQUIlRTMlODMlOTUlRTMlODIlQTElRTMlODMlOTklRTMlODMlODMlRTMlODMlODglRTMlODIlOTIlRTUlOEQlOEElRTglQTclOTIlRTMlODElQUIlRTUlQTQlODklRTYlOEYlOUImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFiM2ZiOTgyYmFlOTI0MGExYWU3ZTM5YzM2ZjQwMWM2&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb253ZWImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWIyM2U3NjRmYTA0OGY1ODg4MWVjZGRmYjRlNDBmOGI2&blend-x=142&blend-y=486&blend-mode=normal&s=6f0dab644783922c4007199e6e249eff)
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JUUzJTgwJTkwalF1ZXJ5JUUzJTgwJTkxaW5wdXQlRTMlODElQUUlRTUlODUlQTglRTglQTclOTIlRTYlOTUlQjAlRTUlQUQlOTclRTMlODMlQkIlRTUlODUlQTglRTglQTclOTIlRTMlODIlQTIlRTMlODMlQUIlRTMlODMlOTUlRTMlODIlQTElRTMlODMlOTklRTMlODMlODMlRTMlODMlODglRTMlODIlOTIlRTUlOEQlOEElRTglQTclOTIlRTMlODElQUIlRTUlQTQlODklRTYlOEYlOUImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFiM2ZiOTgyYmFlOTI0MGExYWU3ZTM5YzM2ZjQwMWM2&mark-x=142&mark-y=57&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrb253ZWImdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWIyM2U3NjRmYTA0OGY1ODg4MWVjZGRmYjRlNDBmOGI2&blend-x=142&blend-y=486&blend-mode=normal&s=6f0dab644783922c4007199e6e249eff)
【jQuery】inputの全角数字・全角アルファベットを半角に変換 - Qiita
便利なのでメモ。###DEMO<!DOCTYPE html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.…
カタカナを変換
カタカナもPHPの[mb_convert_kana()]のように一発で変更できれば良いのですが、JavaScriptの場合はどうやら1つずつ全角・半角を変換するしか無いようです。
半角カタカナを全角カタカナに変換
1 2 3 4 5 6 7 8 9 |
function toFullZenkana(elm) { var beforeStr = new Array('ァ','ィ','ゥ','ェ','ォ','ャ','ュ','ョ','ッ','ー','ヴ','ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ','ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン'); var afterStr = new Array('ァ','ィ','ゥ','ェ','ォ','ャ','ュ','ョ','ッ','ー','ヴ','ガ','ギ','グ','ゲ','ゴ','ザ','ジ','ズ','ゼ','ゾ','ダ','ヂ','ヅ','デ','ド','バ','ビ','ブ','ベ','ボ','パ','ピ','プ','ペ','ポ','ア','イ','ウ','エ','オ','カ','キ','ク','ケ','コ','サ','シ','ス','セ','ソ','タ','チ','ツ','テ','ト','ナ','ニ','ヌ','ネ','ノ','ハ','ヒ','フ','ヘ','ホ','マ','ミ','ム','メ','モ','ヤ','ユ','ヨ','ラ','リ','ル','レ','ロ','ワ','ヲ','ン'); var fullStr = elm.value; for(var i = 0; i < beforeStr.length; i++) { fullStr = fullStr.replace(new RegExp(beforeStr[i], 'g'), afterStr[i]); } return fullStr; } |
cly7796.net
![](https://cly7796.net/blog/wp-content/uploads/2015/12/to-convert-the-characters-entered-in-the-input.jpg)
![](https://cly7796.net/blog/wp-content/uploads/2015/12/to-convert-the-characters-entered-in-the-input.jpg)
inputに入力した文字を決められた形に変換する
フォームなどで入力した文字列を、あらかじめ決められた形に変換してみます。 全角英数を半角英数に変換する HTML JavaScript
全角・半角の変換タイミングと使い方
JavaScriptでユーザーがフォームに入力したことを検知して、全角・半角を変換します。
onChangeイベントでも良いかもしれませんが、ここではonBlurイベントが発生した際の書き方を紹介します。
HTMLタグで直接呼び出す
HTMLタグにonBlur属性を追加してJavaScriptで用意した関数を実行させる方法です。
1 |
<input type="text" class="form-control" id="name" name="name" value="" placeholder="Name" onblur="toHalfWidth(this)" /> |
複数の入力項目を一括で処理する
こちらは、不特定多数のinputタグに対して実行させる方法です。
1 2 3 4 5 6 7 8 9 10 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(function(){ $('input').on('blur', function() { $('input').each(function() { $(this).val(toHalfWidth($(this).val())); }); }); }); </script> |
厳密に言うと、[type=”text”]のみで実行させたいですが、とりあえずということで。
色々な書き方があったので、不足等あれば教えてください。
コメント