ひらがなをカタカナへ自動変換するテキストフィールドを作る方法
テキストフィールドへ入力したひらがなを、自動でカタカナへ変換する方法を紹介します。文字を入力すると、その中に含まれるひらがながすぐにカタカナへ置き換わるため、入力後に変換ボタンを押す必要はありません。
このサンプルではHTMLで1行入力用のテキストフィールドを配置し、CSSで入力欄のデザインを整え、JavaScriptでひらがなからカタカナへの変換処理を行います。数字やアルファベット、記号などはそのまま残し、ひらがなだけを対象として変換します。
商品名や読み仮名、検索キーワードなど、カタカナで入力内容を統一したいフォームに利用できます。入力する人がひらがなで文字を入力しても自動でカタカナへ変換できるため、入力形式をそろえたいお問い合わせフォーム、会員登録画面、管理画面などにも応用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力したひらがなが自動でカタカナへ変換されます。
テキストフィールドへひらがなを入力してください。入力したひらがなが自動でカタカナへ変換され、数字やアルファベット、記号などはそのまま残ります。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<meta charset="UTF-8">
<!-- スマートフォン・タブレット表示へ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ブラウザのタブへ表示するページタイトル -->
<title>ひらがなをカタカナへ自動変換するテキストフィールド</title>
<!-- CSSファイルを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ひらがなをカタカナへ変換するテキストフィールド全体 -->
<div class="hiragana-to-katakana-text-field_wrap">
<!-- 入力エリアのタイトル -->
<div class="hiragana-to-katakana-text-field_title">
ひらがなをカタカナへ自動変換
</div>
<!-- 入力方法を案内する説明文 -->
<p class="hiragana-to-katakana-text-field_text">
入力したひらがなが自動でカタカナへ変換されます。
</p>
<!-- テキストフィールドのラベル -->
<label
class="hiragana-to-katakana-text-field_label"
for="hiragana-to-katakana-text-field-input">
入力
</label>
<!-- ひらがなを入力する1行テキストフィールド -->
<input
class="hiragana-to-katakana-text-field_input"
id="hiragana-to-katakana-text-field-input"
name="text"
type="text"
placeholder="ひらがなを入力してください。"
>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは1行入力用のテキストフィールドを配置し、CSSで入力欄のデザインを整え、JavaScriptで入力内容に含まれるひらがなをカタカナへ自動変換します。数字やアルファベット、記号などはそのまま残るため、入力内容のうちひらがなだけをカタカナへ変換できます。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはテキストフィールド全体を構成するファイルです。タイトル、説明文、ラベル、プレースホルダー、1行入力用のテキストフィールドを編集できます。
style.cssはテキストフィールドのデザインを設定するファイルです。全体の横幅、余白、背景色、文字サイズ、枠線、角丸、フォーカス時の表示などを変更できます。
script.jsはひらがなをカタカナへ変換するファイルです。テキストフィールドへ文字が入力されるたびに入力内容を確認し、ひらがなに該当する文字をカタカナへ置き換えます。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。テキストフィールドへひらがなを入力すると、入力した文字が自動でカタカナへ変換されます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、プレースホルダー、name属性などを変更できます。用途に合わせて商品名、読み仮名、検索キーワードなどの入力欄として利用できます。
style.cssでは全体の横幅、背景色、余白、文字サイズ、枠線、角丸、テキストフィールドの内側余白、フォーカス時の枠線色や強調表示などを変更できます。
script.jsでは/[\u3041-\u3096]/gに一致するひらがなを対象に、対応するカタカナへ変換しています。数字やアルファベット、記号など、変換対象ではない文字はそのまま残ります。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:32px;
フォーム全体の内側余白です。値を大きくすると内容との間隔が広がり、小さくすると詰まった表示になります。
font-size:28px;
タイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:0 0 30px;
説明文の下側余白です。値を大きくするとラベルとの間隔が広がり、小さくすると狭くなります。
padding:14px 16px;
テキストフィールドの内側余白です。上下の14pxを変更すると入力欄の高さが変わり、左右の16pxを変更すると入力文字と枠線の間隔が変わります。
border-radius:10px;
テキストフィールドの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
box-shadow:0 0 0 4px rgba(...)
フォーカス時に表示する外側の強調表示です。4pxを大きくすると強調部分が太くなり、小さくすると控えめになります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせてフォーム全体が縮小表示されます。また、640px以下ではページやフォームの余白、タイトルサイズ、テキストフィールドの内側余白を調整しているため、スマートフォン・タブレット・PCでも利用できます。
コメント