テキストエリア

2023年1月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「テキストエリア」についてやります。

テキストエリアとは

問い合わせフォームなどにおけるいわゆる「自由入力欄」ですね。

<textarea>タグを使います。

<textarea></textarea>

<textarea>タグの中に文章を入れるとそれが初期値になります。消せちゃいますが。

<textarea>自由入力欄</textarea>

rows属性で行数、cols属性で横幅を指定できます。デフォルトでは2行？

colsは「半角英数で何文字分か」だと思います。デフォルトでは20？

でもこういうパーツの大きさは「親要素の幅の〇〇％」で設定することが多いと思うので、colsはたぶんあまり使われないのかなと思います。

<textarea rows="4" cols="30">4行、30文字</textarea>
			  
<textarea rows="4" class="w-100">4行、幅100％</textarea>
			  

右下の三角？を消す

パソコンだと右下に三角？みたいなのがあると思います（スマホだとないみたいです）

これはテキストエリアの大きさを変えることができるボタンのようです。

大きさを変えさせないようにすれば三角は消えます。

textarea {
  resize: none;
}

入力内容に応じて伸縮させる

textareaにはoverflow:autoが設定されているため、入力内容が初期の行数を超えると右にスクロールバーが出ます。ちょっと使いづらいですね。

行数が増えるとそれに応じて自動で伸びていくようにする方法があるみたいです。

参考：Qiita｜内容に応じてサイズが可変する<textarea>を素敵に実装する

<div class="FlexTextarea">
  <div class="FlexTextarea__dummy" aria-hidden="true"></div>
  <textarea id="FlexTextarea" class="FlexTextarea__textarea">伸縮するテキストエリア</textarea>
</div>

.FlexTextarea {
  position: relative;
  font-size: 1rem;
  line-height: 1.8;
}

.FlexTextarea__dummy {
  overflow: hidden;
  visibility: hidden;
  box-sizing: border-box;
  padding: 5px 15px;
  min-height: 120px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  border: 1px solid;
}

.FlexTextarea__textarea {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 5px 15px;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 2px solid #ccc;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  resize: none;
  overflow-wrap: break-word;
}

.FlexTextarea__textarea:focus {
  outline: none;
  box-shadow: none;
  border-color: #32bdeb;
}

function flexTextarea(el) {
  const dummy = el.querySelector('.FlexTextarea__dummy')
  el.querySelector('.FlexTextarea__textarea').addEventListener('input', e => {
    dummy.textContent = e.target.value + '\u200b'
  })
}

document.querySelectorAll('.FlexTextarea').forEach(flexTextarea)

改行していくのに連動して伸びます！

まとめ

言うたほど長く伸びません
言うたほど迅く伸びません

\u200bは「ゼロ幅スペース」という文字だそうです（何それ）