テキストエリア(textarea)の高さを自動にする

テキストエリアを利用すると複数行の多くの文字が入力可能となりますが、入力文字数に合わせてtextareaを配置すると、入力域が大きく邪魔になることがあります。また、高さを短くすると、入力内容が見えなくなり、ユーザーインターフェースの低下となります。

このため、入力に合わせてテキストエリア(textarea)の高さを自動調整することで、場所も取らず、ユーザーインターフェースも向上させることができます。

当ページで作成する入力時の背景・影、入力済み時の背景色変更などにも対応しています。ぜひご活用ください。

色の指定箇所が多く以下の生成では透過で色の変化で設定や固定色を使用しています。ご利用時に色の指定を変更ください。

<input type="text" class="textArea" id="inText"
    placeholder="ＸＸ入力してください"
    onblur="coloeSet(this)"
    onfocus="colorReset(this)">
 
<input type="text" class="textArea" id="textArea2"
    placeholder="ＹＹ入力してください"
    onblur="coloeSet(this)"
    onfocus="colorReset(this)">

<style type="text/css">
 /* --- INPUT=TEXTの標準デザイン設定 ---------------------*/
.textArea {
  box-sizing    : border-box;
  margin        : 0;
  vertical-align: top;
 
  width         : 100%;                /* 一旦100%幅     */
  max-width     : 250px;               /* 入力域の最大幅 */
  height        : 47px;                /* 入力域の高さ   */
  background    : #ffffff;             /* 入力域の背景色 */
  border        : 2px solid #1e6bb9;   /* 入力域の枠線   */
  border-radius : 4px;                 /* 入力域の角丸   */
  padding       : 0 10px;              /* 入力文字の余白 */
  font-size     : 26px;                /* 入力文字サイズ */
  color         : #1e6bb9;             /* 入力文字の色   */
  font-weight   : bold;                /* 入力文字の太字 */
  letter-spacing: .1em;                /* 入力文字の間隔 */
}
 /* --- 入力フィールドにフォーカスか来たら ----------------*/
.textArea:focus {
  border-color  : #59b300;                 /* 枠線色     */
  background    : rgba(89, 179, 0, 0.20);  /* 背景色     */
  box-shadow    : 4px 4px 2px #999;        /* 影付け     */
  outline       : 0;
}
 /* --- 入力説明の文字(標準) -----------------------------*/
.textArea:placeholder-shown {
  color         : #808080;                 /* 文字色     */
  font-size     : 18px;                    /* 少し小さく */
}
 /* --- 入力説明の文字(Chrome,Safari,Android,iOS等) ---- -*/
.textArea::-webkit-input-placeholder {
  color         : #808080;                 /* 文字色     */
  font-size     : 18px;                    /* 少し小さく */
}
 /* --- 入力説明の文字(IE用) -----------------------------*/
.textArea:-ms-input-placeholder {
  color         : #808080;                 /* 文字色     */
  font-size     : 18px;                    /* 少し小さく */
}
 /* --- IEの入力エリア右側×消し -------------------------*/
.textArea::-ms-clear {
  display     : none;                      /* ×を消す   */
}
</style>

function coloeSet(argObj){
 // ==============================================
 //     入力済み時の背景色設定
 // ==============================================
    if(argObj.value==""){
        argObj.style.backgroundColor = "";
    }else{
        argObj.style.backgroundColor = gInColor;
    }
}
function colorReset(argObj){
    argObj.style.backgroundColor = "";
}

テキスト「input type="text"」のデザインは以下でご確認ください
テキスト入力をデザインする