テキストフィールドやテキストエリアに入力した英数字・記号は、JavaScriptを使って全角から半角、半角から全角へ自動変換できます。アルファベット・数字・記号が混在していてもまとめて変換でき、入力や貼り付けのたびに変換処理が実行されます。
今回は、テキストフィールドに入力した全角英数字・記号を半角へ変換する方法と、テキストエリアに入力した半角英数字・記号を全角へ変換する方法を紹介します。アルファベットの大文字・小文字は維持され、変換後の文字列もそのまま編集できます。
変換対象は全角・半角の対応する英数字と記号で、ひらがな・カタカナ・漢字などは変更されません。また、スペースは変換対象に含めず、入力した状態を維持します。日本語入力中は文字の確定を待って変換するため、日本語と英数字・記号が混在する入力欄にも利用できます。
デモ
入力した全角のアルファベット・数字・記号を半角へ自動変換します。
入力した半角のアルファベット・数字・記号を全角へ自動変換します。
①は全角英数字・記号を半角へ、②は半角英数字・記号を全角へ自動変換します。変換対象は英数字と対応する記号（！＠＃＄％など）で、ひらがな・カタカナ・漢字・改行は変更されません。JavaScriptでは、全角から半角への変換に/[！-～]/gと文字コードの減算、半角から全角への変換に/[!-~]/gと加算を使用しています。全角スペース・半角スペースは変換対象に含まれません。なお、テキストフィールドとテキストエリアは入れ替えることもでき、HTMLのinput要素とtextarea要素を変更し、JavaScriptで取得するIDを一致させれば、どちらの入力欄でも全角・半角の変換を利用できます。
コードをコピーして使おう！
① 全角 → 半角（テキストフィールド）
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードの設定 -->
<meta charset="UTF-8">
<!-- スマートフォンなどの画面幅に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>全角英数字・記号を半角へ自動変換</title>
<!-- 入力欄のCSSを読み込む -->
<link rel="stylesheet" href="style.css">
<!-- 英数字・記号を変換するJavaScriptを読み込む -->
<script src="script.js" defer></script>
</head>
<body>
<!-- 入力欄全体の横幅を制御する親要素 -->
<div class="alphanumeric-symbol-width-textbox_container">
<!-- 入力欄のラベル -->
<label class="alphanumeric-symbol-width-textbox_label" for="alphanumeric-symbol-width-textbox-field">
英数字・記号を入力
</label>
<!-- 全角英数字・記号を半角へ変換するテキストフィールド -->
<input class="alphanumeric-symbol-width-textbox_input" id="alphanumeric-symbol-width-textbox-field" name="alphanumeric-symbol-width-textbox-field" type="text" placeholder="例：ＡＢＣ１２３！＠＃" autocomplete="off" spellcheck="false">
</div>
</body>
</html>② 半角 → 全角（テキストエリア）
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードの設定 -->
<meta charset="UTF-8">
<!-- スマートフォンなどの画面幅に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>半角英数字・記号を全角へ自動変換</title>
<!-- 入力欄のCSSを読み込む -->
<link rel="stylesheet" href="style.css">
<!-- 英数字・記号を変換するJavaScriptを読み込む -->
<script src="script.js" defer></script>
</head>
<body>
<!-- 入力欄全体の横幅を制御する親要素 -->
<div class="alphanumeric-symbol-width-textbox_container">
<!-- 入力欄のラベル -->
<label class="alphanumeric-symbol-width-textbox_label" for="alphanumeric-symbol-width-textbox-area">
英数字・記号を入力
</label>
<!-- 半角英数字・記号を全角へ変換するテキストエリア -->
<textarea class="alphanumeric-symbol-width-textbox_textarea" id="alphanumeric-symbol-width-textbox-area" name="alphanumeric-symbol-width-textbox-area" rows="5" placeholder="例：ABC123!@#" spellcheck="false"></textarea>
</div>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。①はテキストフィールドに入力した全角英数字・記号を半角へ変換し、②はテキストエリアに入力した半角英数字・記号を全角へ変換します。どちらも入力や貼り付けに対応し、日本語入力中は文字の確定を待ってから変換します。
2種類のサンプルは、それぞれ独立してダウンロードできます。ファイル構成は共通ですが、HTMLの入力要素とJavaScriptの変換方向が異なります。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、英数字・記号を入力するためのテキストフィールドまたはテキストエリアを記述しています。style.cssでは、入力欄の横幅・余白・枠線・角丸・文字サイズ・フォーカス時の表示などを設定しています。script.jsでは、入力された文字列から変換対象の文字を探し、全角と半角を相互に変換しています。
設置方法・使い方
使用したい変換方向の「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開くと入力欄が表示されます。
①のテキストフィールドにＡＢＣ１２３！＠＃と入力すると、ABC123!@#へ変換されます。②のテキストエリアにABC123!@#と入力すると、ＡＢＣ１２３！＠＃へ変換されます。すでに変換先の文字幅になっている文字や、ひらがな・カタカナ・漢字などは変更されません。
全角英数字・記号を半角へ変換する仕組み
①のscript.jsでは、replace()と正規表現を使用して、文字列に含まれる全角英数字・記号を探しています。変換対象には、全角の感嘆符！から全角のチルダ～までの文字を指定しています。
// 全角の英数字・記号を1文字ずつ半角へ変換する
return value.replace(/[！-～]/g, function(character) {
// 全角と半角の文字コードの差（0xFEE0）を引く
return String.fromCharCode(character.charCodeAt(0) - 0xFEE0);
});
/[！-～]/gは、変換対象となる全角英数字・記号をすべて検索する正規表現です。gを指定することで、文字列の最初に見つかった1文字だけでなく、対象となるすべての文字を変換できます。
character.charCodeAt(0)で対象文字の文字コードを取得し、0xFEE0を引いて対応する半角文字のコードへ変更します。最後にString.fromCharCode()で文字へ戻しています。
半角英数字・記号を全角へ変換する仕組み
②のscript.jsでは、半角の感嘆符!からチルダ~までの文字を変換対象にしています。①とは反対に、文字コードへ0xFEE0を加算して全角文字へ変換します。
// 半角の英数字・記号を1文字ずつ全角へ変換する
return value.replace(/[!-~]/g, function(character) {
// 半角と全角の文字コードの差（0xFEE0）を足す
return String.fromCharCode(character.charCodeAt(0) + 0xFEE0);
});
/[!-~]/gには、半角アルファベットの大文字・小文字、数字、対応する記号が含まれます。アルファベットの大文字・小文字は維持され、文字幅だけが変更されます。
なお、どちらの正規表現にもスペースは含まれていないため、全角スペースと半角スペースは変換されません。また、すべてのUnicode記号を変換する処理ではなく、指定した範囲の英数字・記号だけを対象としています。
入力時と日本語入力確定時の処理
どちらのサンプルも、入力欄のinputイベントを使用しています。キーボードからの入力や文字列の貼り付けなどで値が変化すると、変換処理が実行されます。
日本語入力中はevent.isComposingで変換を一時的に見送り、compositionendイベントで文字が確定したときにも変換を実行しています。
// 日本語入力中は変換せず、文字の確定を待つ
if (event.isComposing) return;
// 変換前のカーソル位置と選択範囲を取得
const start = alphanumericSymbolWidthField.selectionStart;
const end = alphanumericSymbolWidthField.selectionEnd;
// 入力欄の値を取得し、全角英数字・記号を半角へ変換
alphanumericSymbolWidthField.value = convertToHalfWidth(alphanumericSymbolWidthField.value);
// 変換後もカーソル位置と選択範囲を維持
alphanumericSymbolWidthField.setSelectionRange(start, end);
上記は①のテキストフィールドで使用している処理です。selectionStartとselectionEndでカーソル位置と選択範囲を取得し、変換後にsetSelectionRange()で元の位置へ戻しています。
②のテキストエリアでも同じ方法を使用していますが、対象要素はalphanumericSymbolWidthArea、変換関数はconvertToFullWidth()です。
変換後の文字列を取得する方法
変換された文字列は、通常のテキストフィールドやテキストエリアと同じように、JavaScriptのvalueプロパティから取得できます。
①のテキストフィールドでは、HTMLに設定したid="alphanumeric-symbol-width-textbox-field"を使用して要素を取得します。次のコードは値の取得方法を説明するための例であり、ダウンロードするZIPには含まれていません。
// テキストフィールドの要素を取得
const textField = document.getElementById("alphanumeric-symbol-width-textbox-field");
// 変換後の文字列を変数へ代入
const convertedValue = textField.value;
document.getElementById()で入力欄を取得し、textField.valueを変数convertedValueへ代入しています。取得される値は文字列です。例えば、ＡＢＣ１２３！＠＃を入力して変換された場合、convertedValueには"ABC123!@#"が入ります。
②のテキストエリアでは、getElementById()に指定するIDをalphanumeric-symbol-width-textbox-areaへ変更してください。
// テキストエリアの要素を取得
const textArea = document.getElementById("alphanumeric-symbol-width-textbox-area");
// 変換後の文字列を変数へ代入
const convertedValue = textArea.value;
②では、ABC123!@#を入力して変換された場合、convertedValueには"ＡＢＣ１２３！＠＃"が入ります。改行を含む文字列も取得できます。
どちらもvalueを参照した時点の文字列を取得するため、変換処理が完了した後に実行してください。取得した文字列は、別のJavaScript処理への受け渡しや入力内容の確認などに利用できます。
変換対象と変換方向の変更
変換対象の文字は、script.jsの正規表現で指定しています。例えば、英数字だけを変換して記号を変更したくない場合は、全角から半角への変換で使用する/[！-～]/gを/[Ａ-Ｚａ-ｚ０-９]/gへ変更します。
半角から全角への変換で英数字だけを対象にする場合は、/[!-~]/gを/[A-Za-z0-9]/gへ変更します。
// 全角英数字だけを半角へ変換する場合
/[Ａ-Ｚａ-ｚ０-９]/g
// 半角英数字だけを全角へ変換する場合
/[A-Za-z0-9]/g
変換方向を逆にする場合は、正規表現だけでなく文字コードの加減算も変更してください。全角から半角へ変換するときは0xFEE0を引き、半角から全角へ変換するときは0xFEE0を足します。
変換関数を変更する場合は、inputイベントとcompositionendイベントの両方から呼び出している関数名も一致させてください。
入力欄のデザインとサイズ調整
style.cssの.alphanumeric-symbol-width-textbox_inputと.alphanumeric-symbol-width-textbox_textareaでは、入力欄の内側余白・枠線・角丸・背景色・文字サイズなどを設定しています。
padding: 16px;を大きくすると文字と枠線の間隔が広がり、border: 2px solid #dbe5f1;の2pxを変更すると枠線の太さを調整できます。border-radius: 12px;を変更すると角の丸みが変わります。
②のテキストエリアにはmin-height: 140px;とresize: vertical;を設定しています。min-heightで最小の高さを変更でき、利用者は入力欄の右下をドラッグして縦方向にサイズを調整できます。
HTMLのrows="5"でも初期の行数を指定していますが、実際の表示高さにはCSSのmin-heightや余白の設定も影響します。
レスポンシブ対応
どちらのサンプルも、親要素の.alphanumeric-symbol-width-textbox_containerにwidth: 100%;とmax-width: 480px;を設定しています。これにより、広い画面では最大横幅を480pxに制限し、狭い画面では設置先の横幅に合わせて表示できます。
margin: 40px auto;では上下に40pxの余白を設け、左右を自動調整して中央に配置しています。最大横幅や上下余白は、それぞれの数値を変更して調整できます。
/* =========================================
スマートフォン対応
========================================= */
@media (max-width: 640px) {
/* 画面幅640px以下では入力欄の内側余白を調整する */
.alphanumeric-symbol-width-textbox_input {
padding: 14px; /* 内側の余白を14pxに変更する */
}
}
上記は①のテキストフィールドで使用しているメディアクエリです。画面幅が640px以下になると、内側余白を16pxから14pxへ変更します。
②のテキストエリアでは、同じ画面幅で内側余白を14px、最小の高さを130pxへ変更しています。切り替え幅の640pxや各数値を変更することで、設置先のデザインに合わせて調整できます。
コメント