ゆきのふ

テキストエリア

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

大文字を小文字に・小文字を大文字にアルファベットを自動変換するテキストエリアを作る方法 大文字のアルファベットを小文字に、小文字のアルファベットを大文字に自動変換するテキストエリアを作る方法を紹介します。このサンプルでは、上側のテキストエリ...
テキストエリア

自動で高さが広がるテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

自動で高さが広がるテキストエリアを作る方法 自動で高さが広がるテキストエリアを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、入力した文章量に応じてテキストエリアの高さが自動で広がるフォームを作成しま...
テキストエリア

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

入力文字数を制限するテキストエリアを作る方法 入力文字数を制限するテキストエリアを作る方法を紹介します。このサンプルでは、HTMLのtextarea要素へmaxlength属性を指定し、改行を含む文章を最大300文字まで入力できるフォームを...
テキストエリア

入力内容に応じて高さが自動で広がるテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力内容に応じて高さが自動で広がるテキストエリアを作る方法 入力内容に応じて高さが自動で広がるテキストエリアを作る方法を紹介します。通常のテキストエリアは文章が長くなるとスクロールバーが表示されますが、このサンプルでは入力内容に合わせて高さ...
テキストエリア

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

入力内容をリアルタイム表示するテキストエリアを作る方法 入力内容をリアルタイム表示するテキストエリアを作る方法を紹介します。このサンプルでは、テキストエリアへ入力した文章をJavaScriptで取得し、入力内容の確認エリアへそのまま表示しま...
テキストエリア

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

コピーボタン付きテキストエリアを作る方法 コピーボタン付きテキストエリアを作る方法を紹介します。このサンプルでは、テキストエリアに入力されている内容をボタンひとつでクリップボードへコピーできる機能を実装しています。長文のコピーや定型文の共有...
テキストエリア

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

読み取り専用テキストエリアを作る方法 読み取り専用テキストエリアを作る方法を紹介します。このサンプルでは、HTMLのreadonly属性を使用して、内容を表示したまま編集だけを禁止できるテキストエリアを作成します。入力禁止(disabled...
テキストエリア

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

入力禁止のテキストエリアを作る方法 入力禁止のテキストエリアを作る方法を紹介します。このサンプルでは、HTMLの属性だけを利用して編集できないテキストエリアを表示します。初期状態で文章を表示したまま、ユーザーによる入力や編集を禁止したい場合...
テキストエリア

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

クリアボタン付きテキストエリアを作る方法 クリアボタン付きテキストエリアを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、入力中の文章をボタンひとつで削除できるテキストエリアを作成します。長文を入力し...
テキストエリア

入力文字数をリアルタイムでカウントするテキストエリアを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

入力文字数をリアルタイムでカウントするテキストエリアを作る方法 入力文字数をリアルタイムでカウントするテキストエリアを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、テキストエリアへ文字を入力するたび...