ゆきのふ

テキストボックス

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

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

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

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

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

ひらがな・カタカナを自動変換するテキストボックスを作る方法 ひらがな・カタカナを自動変換するテキストボックスを作る方法を紹介します。このサンプルでは、入力した文字をリアルタイムでひらがなまたはカタカナへ自動変換できます。HTML・CSS・J...
テキストボックス

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

数字の全角・半角を自動変換するテキストボックスを作る方法 数字の全角・半角を自動変換するテキストボックスを作る方法を紹介します。このサンプルでは、入力した数字をリアルタイムで全角または半角へ自動変換するテキストボックスを実装しています。HT...
テキストボックス

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

アルファベットの大文字・小文字を自動変換するテキストボックスを作る方法 アルファベットの大文字・小文字を自動変換するテキストボックスを作る方法を紹介します。このサンプルでは、入力したアルファベットをリアルタイムで大文字または小文字へ自動変換...
テキストボックス

ページを開くと自動選択されるテキストボックスを作る方法【HTML/CSS・サンプルコード付き】

ページを開くと自動選択されるテキストボックスを作る方法 ページを開くと自動的にカーソルが表示されるテキストボックスをHTMLとCSSで作る方法を紹介します。このサンプルではHTMLのautofocus属性を使用し、ページの表示直後に指定した...
テキストボックス

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

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

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

読み取り専用テキストボックスを作る方法 読み取り専用テキストボックスをHTMLとCSSで作る方法を紹介します。このサンプルでは、HTMLのreadonly属性を使用し、表示されている内容を利用者が書き換えられないテキストボックスを実装します...
テキストボックス

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

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

クリアボタン付きテキストボックスを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

クリアボタン付きテキストボックスを作る方法 クリアボタン付きテキストボックスを作る方法を紹介します。入力欄へ文字を入力するとクリアボタンが表示され、クリックすると入力内容をまとめて削除できるサンプルです。HTML・CSS・JavaScrip...