文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 入力部品のデザイン > テキストエリアの自動高さ

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

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

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

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

テキストエリアをいろいろ変えてみよう!

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

入力域の設定
文字サイズ
フォーカス時のデザイン
入力ヒント
入力済みの色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
フォーカス時の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<input type="text" class="textArea" id="inText"
    placeholder="XX入力してください"
    onblur="coloeSet(this)"
    onfocus="colorReset(this)">
 
<input type="text" class="textArea" id="textArea2"
    placeholder="YY入力してください"
    onblur="coloeSet(this)"
    onfocus="colorReset(this)">
生成したCSS
<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>
生成したJavaScript
function coloeSet(argObj){
 // ==============================================
 //     入力済み時の背景色設定
 // ==============================================
    if(argObj.value==""){
        argObj.style.backgroundColor = "";
    }else{
        argObj.style.backgroundColor = gInColor;
    }
}
function colorReset(argObj){
    argObj.style.backgroundColor = "";
}

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

ページTOP
広告
広告

注意事項

入力ヒントは主要ブラウザのベンダープレフィックスに対応しています。

ページTOP
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン