ゆきのふ

テキストエリア

入力内容をチェックして未入力エラーを表示するテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力内容をチェックして未入力エラーを表示するテキストエリアを作る方法 入力内容をチェックして未入力エラーを表示するテキストエリアを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、送信ボタンを押したとき...
テキストフィールド

入力文字数を制限するテキストフィールドを作る方法【HTML/CSS・サンプルコード付き】

入力文字数を制限するテキストフィールドを作る方法 入力文字数を制限するテキストフィールドを作る方法を紹介します。このサンプルでは、HTMLのinput要素へmaxlength属性を指定し、入力できる文字数を最大30文字までに制限します。Ja...
テキストフィールド

入力内容をリアルタイム表示するテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力内容をリアルタイム表示するテキストフィールドを作る方法 入力内容をリアルタイム表示するテキストフィールドを作る方法を紹介します。テキストフィールドへ入力した文字を、入力と同時に別の表示エリアへ反映できるサンプルです。HTML・CSS・J...
テキストフィールド

ひらがなをカタカナへ自動変換するテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ひらがなをカタカナへ自動変換するテキストフィールドを作る方法 テキストフィールドへ入力したひらがなを、自動でカタカナへ変換する方法を紹介します。文字を入力すると、その中に含まれるひらがながすぐにカタカナへ置き換わるため、入力後に変換ボタンを...
テキストフィールド

全角数字を半角に・半角数字を全角に自動変換するテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

全角数字を半角に・半角数字を全角に自動変換するテキストフィールドを作る方法 テキストフィールドへ入力した全角数字を半角数字へ、半角数字を全角数字へ自動変換する方法を紹介します。2つのテキストフィールドを用意し、一方では全角数字を半角へ、もう...
テキストフィールド

大文字を小文字に・小文字を大文字にアルファベットを自動変換するテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

大文字を小文字に・小文字を大文字にアルファベットを自動変換するテキストフィールドを作る方法 英字を入力すると、アルファベットの大文字を小文字へ、小文字を大文字へ自動変換できるテキストフィールドを作る方法を紹介します。大文字へ変換する入力欄と...
テキストエリア

ページを開くと自動でフォーカスするテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

ページを開くと自動でフォーカスするテキストエリアを作る方法 ページを開いたときに、テキストエリアへ自動でフォーカスする方法を紹介します。通常は入力欄をクリックしてから文字を入力しますが、このサンプルではページを表示した直後からテキストエリア...
テキストフィールド

コピーボタン付きテキストフィールドを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

コピーボタン付きテキストフィールドを作る方法 コピーボタン付きテキストフィールドをHTML・CSS・JavaScriptで作る方法を紹介します。このサンプルでは、テキストフィールドの右側に配置した「コピー」ボタンをクリックすると、表示されて...
テキストフィールド

読み取り専用テキストフィールドを作る方法【HTML/CSS・サンプルコード付き】

読み取り専用テキストフィールドを作る方法【HTML/CSS・サンプルコード付き】 読み取り専用テキストフィールドを作る方法 読み取り専用テキストフィールドをHTMLとCSSで作る方法を紹介します。このサンプルでは、HTMLのreadonly...
テキストフィールド

入力禁止のテキストフィールドを作る方法【HTML/CSS・サンプルコード付き】

入力禁止のテキストフィールドを作る方法 入力禁止のテキストフィールドを作る方法を紹介します。このサンプルでは、HTMLのdisabled属性を使用し、ユーザーが入力や編集を行えないテキストフィールドを実装します。設定値や自動入力された情報を...