テキストフィールドやテキストエリアに入力したアルファベットは、JavaScriptを使って自動的に大文字や小文字へ変換できます。文字を入力したり貼り付けたりすると、その場で変換されるため、変換ボタンを押す必要はありません。
今回は、テキストフィールドに入力した小文字を大文字へ変換する方法と、テキストエリアに入力した大文字を小文字へ変換する方法を紹介します。どちらも入力した文字がリアルタイムで変換され、変換後の内容をそのまま編集できます。
変換の対象となるのは半角アルファベットのみで、数字・記号・日本語などは変更されません。また、変換後の文字列は値として取得できるため、入力内容を別の処理に利用することもできます。
デモ
入力した小文字のアルファベットを大文字へ自動変換します。
入力した大文字のアルファベットを小文字へ自動変換します。
①はテキストフィールドに入力した小文字を大文字へ、②はテキストエリアに入力した大文字を小文字へリアルタイムで自動変換します。変換方向を逆にする場合は、JavaScriptの正規表現とtoUpperCase()・toLowerCase()を変更してください。
コードをコピーして使おう！
① 小文字を大文字へ自動変換するテキストフィールド
<!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>
<!-- スタイルシートを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 小文字を大文字へ変換する入力欄 -->
<div class="alphabet-case_container">
<label class="alphabet-case_label" for="alphabet-case-field">
アルファベットを入力
</label>
<input class="alphabet-case_input" id="alphabet-case-field" name="alphabet-case-field" type="text" placeholder="例：hello world" autocomplete="off" spellcheck="false">
</div>
<!-- 自動変換処理を読み込み -->
<script src="script.js"></script>
</body>
</html>② 大文字を小文字へ自動変換するテキストエリア
<!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>
<!-- スタイルシートを読み込み -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 大文字を小文字へ変換する入力欄 -->
<div class="alphabet-case_container">
<label class="alphabet-case_label" for="alphabet-case-area">
アルファベットを入力
</label>
<textarea class="alphabet-case_textarea" id="alphabet-case-area" name="alphabet-case-area" rows="5" placeholder="例：HELLO WORLD" spellcheck="false"></textarea>
</div>
<!-- 自動変換処理を読み込み -->
<script src="script.js"></script>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
アルファベットの大文字・小文字を自動変換するサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。①はテキストフィールドで小文字を大文字へ、②はテキストエリアで大文字を小文字へ変換する仕組みです。それぞれ独立したサンプルとしてダウンロードでき、ファイル構成は共通ですが、入力要素と変換処理が異なります。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、アルファベットを入力するテキストフィールドまたはテキストエリアを配置しています。style.cssでは、入力欄の横幅・余白・枠線・角丸・文字サイズなどを設定しています。script.jsでは、入力内容の変化を検知し、半角アルファベットの大文字・小文字を自動変換する処理を記述しています。
設置方法・使い方
使用したいタイプの「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開くと入力欄が表示されます。
①は小文字のアルファベットを入力すると大文字に変換され、②は大文字のアルファベットを入力すると小文字に変換されます。文字の貼り付けにも対応しており、変換ボタンなどの操作は必要ありません。
大文字・小文字を自動変換する仕組み
script.jsでは、inputイベントを使用して入力内容の変化を検知しています。①のテキストフィールドでは、次の処理によって小文字のアルファベットを大文字へ変換しています。
// ① テキストフィールド：小文字から大文字へ変換
const alphabetCaseField = document.getElementById("alphabet-case-field");
alphabetCaseField.addEventListener("input", function() {
const start = alphabetCaseField.selectionStart;
const end = alphabetCaseField.selectionEnd;
alphabetCaseField.value = alphabetCaseField.value.replace(/[a-z]/g, function(character) {
return character.toUpperCase();
});
// 変換後もカーソル位置を維持
alphabetCaseField.setSelectionRange(start, end);
});
document.getElementById()でテキストフィールドを取得し、inputイベントで入力内容が変化するたびに処理を実行します。valueで取得した文字列から、正規表現/[a-z]/gに一致する半角英字の小文字を探し、toUpperCase()で大文字へ変換しています。
②のテキストエリアでは、検索条件に/[A-Z]/gを使用し、toLowerCase()で大文字を小文字へ変換します。どちらも数字・記号・日本語などは変換対象に含まれません。
また、selectionStartとselectionEndで変換前のカーソル位置や選択範囲を取得し、setSelectionRange()で復元することで、入力途中でもカーソル位置が移動しないようにしています。
変換方向を逆にする方法
変換方向は、script.jsの正規表現と変換メソッドを変更することで逆にできます。小文字から大文字への変換では、次のコードを使用しています。
alphabetCaseField.value = alphabetCaseField.value.replace(/[a-z]/g, function(character) {
return character.toUpperCase();
});
大文字から小文字へ変更する場合は、/[a-z]/gを/[A-Z]/gに変更し、toUpperCase()をtoLowerCase()に置き換えます。反対方向へ変更する場合は、この2か所を逆にしてください。
テキストフィールドとテキストエリアのどちらでも同じ方法で変更できます。正規表現は変換対象となる文字を指定しているため、変換メソッドだけでなく、検索条件も合わせて変更する必要があります。
変換後の値を取得する方法
テキストフィールドとテキストエリアは、どちらもvalueプロパティで入力値を取得できます。今回のサンプルでは、取得した文字列を変換したあと、同じ要素のvalueへ代入しています。そのため、変換後の値もvalueから取得できます。
①のテキストフィールドでは、次のコードで変換後の値を変数へ代入できます。
// テキストフィールドの要素を取得
const alphabetCaseField = document.getElementById("alphabet-case-field");
// 変換後の値を変数へ代入
const value = alphabetCaseField.value;
document.getElementById()でid="alphabet-case-field"の要素を取得し、alphabetCaseField.valueを変数valueへ代入しています。例えば「hello world」と入力した場合、変換後の"HELLO WORLD"が取得されます。
②のテキストエリアでは、次のように取得します。
// テキストエリアの要素を取得
const alphabetCaseArea = document.getElementById("alphabet-case-area");
// 変換後の値を変数へ代入
const value = alphabetCaseArea.value;
②では「HELLO WORLD」と入力すると、変換後の"hello world"が取得されます。どちらも取得される値のデータ型はstring（文字列）です。
これらは値の取得方法を説明するための追加例であり、ダウンロードするZIPには含まれていません。実際に利用する場合は、script.js内で変換処理のあとに記述するなど、変換が完了したタイミングで値を取得してください。取得した文字列は、別のJavaScript処理へ渡すこともできます。
レスポンシブ対応
style.cssでは、.alphabet-case_containerにwidth: 100%;とmax-width: 480px;を設定し、入力欄の最大横幅を480pxに制限しています。max-widthを変更すると、テキストフィールドやテキストエリアの最大横幅を調整できます。
入力欄の内側余白は通常16pxですが、画面幅が640px以下になると14pxに変更されます。テキストエリアの最小高さも、通常の140pxから130pxへ変更しています。これにより、PCとスマートフォンの画面幅に合わせて入力欄を表示できます。
コメント