まあまあ使うtextareaテクニック

概要

個人的なtextareaタグの備忘録を、Qiita記事にまとめてみました。
外部プラグインを使わずカスタマイズする時のちょっとしたテクニック集です。

言語

• html5
• css3
• javascript ( 最後にちょっとだけ使います )

テクニック

textareaタグ

textareaのタグです。これタグをベースに説明していきます。
htmlにタグを記述するとテキストエリアを表示できます。

html

<textarea></textarea>

以下のようにテキストエリアが表示されます。

入力禁止にする(readonlyを指定)

textareaタグにreadonlyを指定します。
ユーザに操作させたくないときに使用します。

html

<textarea readonly></textarea>

タブ遷移でフォーカスを当てないようにする

tabindexは、タブ遷移の順番を決めるときに使用します。
-1を指定すると、tabキーでのフォーカスが当たらないようになります。

html

<textarea tabindex="-1"></textarea>

右下のリサイズのつまみを表示しない

下記画像の赤矢印部分の所です。アプリのUI/UXによっては非表示にしたくなる時もあります。

スタイルシートでresize: noneを指定すると表示を消すことができます。

css

textarea {
    resize: none;
}

html

<textarea></textarea>

以下のように表示が消えます。

placeholderを指定する

入力された情報が、なにも無いときに表示するテキストです。

html

<textarea placeholder="ここに入力してください"></textarea>

placeholderのスタイルを変更する

placeholderのスタイルもこだわりたいときに使用します。

css

textarea::placeholder {
    color: red;
    opacity: .5;
    font-family: sans-serif;
    font-weight: bold;
}

html

<textarea placeholder="ここに入力してください"></textarea>

以下のようにスタイルが適用されます。

文字数制限をする

maxlengthを指定することで入力する文字数を制御できます。

html

<textarea maxlength="80"></textarea>

入力内容のチェックをする

javascriptを使って入力情報のチェックをします。
正しいテキスト「こんにちは」が入力された場合に、枠を緑色にします。

css

textarea.success {
  border: solid 2px green;
}

html

<textarea id="hello_textarea"></textarea>

javascript

var textarea = document.getElementById("hello_textarea");
textarea.addEventListener("input", function() {
    // textareaに入力されたときの処理内容
    if (!textarea.value.match(/こんにちは/)) {
        textarea.classList.remove("success");
    } else {
        textarea.classList.add("success");        
    }
});

こちらはコードと結果画像だけでは分かりにくいので、実際に動くものを用意してみました。

See the Pen textarea data check by ishi720 (@ishi720) on CodePen.

終わり