We Blog Weblog

テキストエリア

Web

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は「ゼロ幅スペース」という文字だそうです(何それ)

この記事を書いた人
みやの
Web・DTP担当

Contact Us

ご意見、ご相談、料金のお見積もりなど、お気軽にお問い合わせください。

お問い合わせはこちら

TOP