入力フォームを作っています。
通常のテキストエリアでは、改行しても画面が固定で見づらくなっていきます。
そこで、改行すると画面が一緒に広がっていくようにしたいと思いました。
いろいろ検索した結果以下のコードで実現可能なのですが、自身でコードを理解してから実装したいと考えています。
javascript
1//textareaの要素を取得 2let textarea = document.getElementById('text'); 3//textareaのデフォルトの要素の高さを取得 4let clientHeight = textarea.clientHeight; 5 6//textareaのinputイベント 7textarea.addEventListener('input', ()=>{ 8 //textareaの要素の高さを設定(rows属性で行を指定するなら「px」ではなく「auto」で良いかも!) 9 textarea.style.height = clientHeight + 'px'; 10 //textareaの入力内容の高さを取得 11 let scrollHeight = textarea.scrollHeight; 12 //textareaの高さに入力内容の高さを設定 13 textarea.style.height = scrollHeight + 'px'; 14}); 15 16
CSS
1<textarea id="text"></textarea>
CSS
1#text { 2 width: 100%; 3 height: 25px; 4}
質問の前に確認
また文法についても確認したいところがあります。
jsの表記法は
const 変数名 = 場所.指示(引数);
のように、場所.指示
の組み合わせという理解で問題ないのでしょうか。
本題
特にわからないのは以下のコードです。
.addEventListener('input', ()=>{
これはaddEventListener()メソッドにより常に入力待ちを保持
('input'
により、テキストエリアに文字がインプットされると中カッコ内に入るという書き方なのかなと推測しました。
が、しかし、inputという引数を調べても思っているのと違うものが多くでてきたりしてどうしてもわかりません。
(素直に言うなら、一覧がみれるサイトなどがあればわかりやすいのにと思っています。)
()=>{
の部分についてもアロー関数というキーワードが出てきたものの、それって結局なんで書く必要があるの?といった具合です。
##作っているWEBサイトについて。
PHPで掲示板のようなものをつくっているのですが、一人一人に返信を書こうとした際にテキストエリアがずっと広がっているとスクロールの手間も増え非常に見づらいため、デザイン性を考えてデフォルトでは小さく、入力された文字によって大きくといった風にしたいのです。
PHPに関しては検索でだいたいは分かったのですが、jsに関しては全く調べてもわからなかったため質問させていただきます。
貼り付けさせていただいたコードはコメントも含めコピペそのままです。
初質問なので不備があればすみません。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。