cssとjQueryで値の変更・取得や、placeholderの改行などtextareaタグを使いこなす

2019.05.10
プロモーションが含まれています

cssとjQueryで値の変更・取得してカスタマイズや、placeholderの改行などtextareaタグを使いこなす


cssとjQueryで値の変更・取得してカスタマイズや、placeholder内で改行するなどtextareaタグを使いこなす

HTML5関連記事

関連記事をもっとみる

textareaタグとは？

「textareaタグ」は、フォーム内で長文を入力するために使われるHTML要素です。

<textarea>タグは、複数行のテキスト入力欄を作成する際に使用します。

input type=”text”との違い

input type=”text”は、短い文章を入力するもので、入力テキストの改行はできません。
textareaタグは、長文を入力するもので、改行が可能です。

textareaタグの使い方と属性

name属性

textareaタグについている、name属性はデータを送るときに利用されるデータの名前で使用するので、データ送信の必要がある場合は必須です。

id属性

textareaタグについている、id属性はjQueryで選択値の取得や変更で使用していきます。

class属性

textareaタグについている、class属性はcssでデザインの変更で使用していきます。

textareaタグに初期値を設定する

HTML

<textarea id="area" name="area">入力初期値</textarea>

<textarea>入力初期値</textarea>のように、タグの間に入力初期値を入れます。
初期値を、空にしたい場合は何も入力しません。

textareaタグにplaceholderを設定する

HTML

<textarea id="area" name="area" placeholder="入力のヒント">入力初期値</textarea>

placeholder属性にテキストを入力することで、入力欄が空の状態の場合、入力内容のヒントを表示できます。
入力欄が、入力されたタイミングで消えます。

textareaタグのplaceholder内で改行する

HTML

<textarea id="area" name="area" placeholder="入力のヒント&#13;改行する"></textarea>

placeholder属性の中で、改行がしたい場合は、改行したい箇所で&#13;を入力することで、改行できます。
ただし、Macのsafariでは改行されないそうです。

placeholderをフローティングラベルにする

placeholderは入力してしまうと消えるので、何入力すればいいか途中で忘れたりします。
入力しても消えないフローティングラベルにする場合は、下記を参考にしてください。

placeholderを見やすく！jQuery+css3でつくるフローティングラベル
入力すると消えてしまうinputタグのplaceholderを見やすくするjQuery+css3でつくるフローティングラベル jQuery関連記事 サンプルを用意しました。 html ...
mugenweb-note.com
2018.06.26

textareaタグの入力を必須にする

HTML

<textarea id="area" name="area" required></textarea>

required属性を設定することで、入力がない場合はエラーが出ます。

textareaタグを読み取り専用にする

HTML

<textarea id="area" name="area" readonly>読み取り専用のため、編集できません。</textarea>

readonly属性を設定することで、読み取り専用にし、編集できなくなります。

cssでtextareaタグのデザインをカスタマイズする

cssでtextareaタグのデザインを簡単に変更していきます。
下記のcssで基本的なカスタマイズをしていきます。

css

textarea{
  width: 90%;
  height: 100px;
  padding: 10px;
  margin: 1.5rem auto;
  display: block;
  border-radius: 5px;
  border: 2px solid #777;
  outline:none;
  line-height: 20px;
}

cssの:hover・:focusでデザインを変更する

cssの疑似要素の、:hoverと、:focusでtextareaタグのデザインを変更してみます。上記cssに追記したものが下記です。

See the Pen NWdqpOr by むぅ (@mugenweb)
on CodePen.light

css

textarea:hover {
  border-color:#f6b73c;
  background-color: #fdefd4;
  color:#f6b73c;
}

textarea:focus {
  border-color: #3d7e9a;
  background-color: #cfeffd;
  color:#3d7e9a;
}

cssの:hover・:focus時にplaceholderのデザインを変更する

cssの疑似要素の、:hoverと、:focusでplaceholderのデザインを変更してみます。上記cssに追記したものが下記です。

See the Pen OJWVpGM by むぅ (@mugenweb)
on CodePen.light

css

textarea:hover::placeholder {
  font-weight: bold;
  text-decoration: underline;
  color:#f6b73c;
}

textarea:focus::placeholder {
  font-weight: bold;
  text-decoration: underline;
  color:#3d7e9a;
}

textareaタグに入力された値をjQueryで取得する

確認ボタンが押された時に、textareaタグに入力された値をjQueryで取得してみます。
取得した値がわかりやすいように、結果をHTMLに出力します。

See the Pen MWJwoZa by むぅ (@mugenweb)
on CodePen.light

HTML

<textarea id="area" name="area" class="area"></textarea>
<textarea id="result"></textarea>

<button id="check" type="button">確認</button>

JavaScript

$('#check').click(function() {
  var result = $('#area').val();
  $('#result').val(result);
});

上記の例では、確認ボタンが押されたときに、textareaタグのval()値を取得するという処理が行われています。
textareaタグは、form関連のタグなので、jQueryで値を取得したい場合は、text()ではなく、val()を使用します。
最後に、取得した値を#resultに反映しています。

jQueryでtextareaタグに入力された値が空か判別する

確認ボタンが押された時に、jQueryでtextareaタグに入力された値が空かを判別して、わかりやすいように、結果をHTMLに出力します。

See the Pen KKadvRz by むぅ (@mugenweb)
on CodePen.light

HTML

<textarea id="area" name="area" class="area"></textarea>
<textarea id="result"></textarea>

<button id="check" type="button">確認</button>

JavaScript

$('#check').click(function() {
  var result = $('#area').val();
  if(result !== ''){
    $('#result').val(result);
  }else{
    $('#result').val('値は空でした。');
  }
});

上記の例では、確認ボタンが押されたときに、textareaタグのval()値を取得し、値を確認して出力を変更しています。
最後に、結果を#resultに反映しています。

inputの入力値を、jQueryでtextareaの末尾に改行して追記する

追記ボタンが押された時に、jQueryでinputに入力された値を、textareaの末尾に改行してから追記し、結果をHTMLに出力します。

See the Pen RwKWLgN by むぅ (@mugenweb)
on CodePen.light

HTML

<div class="flex">
  <input type="text" name="" id="">
  <button id="check" type="button">確認</button>
</div>
<textarea id="result"></textarea>

JavaScript

$('#check').click(function() {
  var input = $('#input').val();
  var result = $('#result').val();

  if(input !== ''){
    var br = '';
    if(result !== ''){
      br = '\n';
    }
    $('#result').val(result + br + input);
  }
});

上記の例では、確認ボタンが押されたときに、まずinputの値を取得し、入力がない場合は何もしません。
inputに入力があった場合は、textareaのval()を確認し、空なら改行を入れずに、入力されているなら、改行を入れて結果を反映します。

jQueryでtextareaに入力されている文字数をカウントする

jQueryで、textareaに入力された時に、入力されている文字数をカウントし、結果をHTMLに出力します。

See the Pen vYgNWPp by むぅ (@mugenweb)
on CodePen.light

HTML

<textarea id="result"></textarea>
<p><span id="count">0</span>文字入力されています。</p>

JavaScript

$('#result').keyup(function() {
  var result = $(this).val().length;

  $('#count').text(result);
});

上記の例では、textareaに入力された時に、val().lengthで入力されている値の文字数をカウントし、結果をHTMLに出力します。

jQueryでtextareaにコピペされた文字数でもカウントする

上の例では、コピペされた時には、文字数をカウントしないので、コピペされた場合でも文字数をカウントし、結果をHTMLに出力します。

See the Pen MWJareK by むぅ (@mugenweb)
on CodePen.light

HTML

<textarea id="result"></textarea>
<p><span id="count">0</span>文字入力されています。</p>

JavaScript

$('#result').bind('keyup',function(){
  result = $(this).val().length;
  $('#count').html(result);
});

$('#result').blur(function(){
  result = $(this).val().length;
  $('#count').html(result);
});

bind('keyup'～が文字数を入力時に文字数カウントする関数です。

blur(～の関数で、コピペされた場合カウントできないのを、textareaからフォーカスが外れたタイミングで、再計算します。
タイムラグは出てしまいますが、あったほうが便利ですね。

jQueryでtextareaタグに入力された値を置換する

確認ボタンが押された時に、jQueryでtextareaタグに入力された改行を<br>タグに置換して、わかりやすいように、結果をHTMLに出力します。

See the Pen ExZVELV by むぅ (@mugenweb)
on CodePen.light

HTML

<textarea id="area" name="area" class="area"></textarea>
<textarea id="result"></textarea>

<button id="check" type="button">確認</button>

JavaScript

$('#check').click(function() {
  var result = $('#area').val();
  if(result !== ''){
    var replace = result.replace(/\n/g, "<br>");
    $('#result').val(replace);
  }
});

上記の例では、確認ボタンが押されたときに、textareaタグのval()値を取得し、値の中から改行があれば<br>タグに置換した結果を#resultに反映しています。

jQueryでtextareaタグに入力されたhtml特殊文字を置換する

jQueryでtextareaタグに入力されたhtml特殊文字をエスケープ、もしくはアンエスケープする場合は、下記の記事を参考にしてください。

【jQuery】よく使うhtml特殊文字をエスケープ/アンエスケープの解説と特殊文字の変換ツール
よく使うhtml特殊文字とjQueryでhtml特殊文字をエスケープ/アンエスケープする方法の解説、特殊文字の変換ツールを作ってみました。 バリデーションで使えそうなfunctionも追加しました。 デモはこちら...
mugenweb-note.com
2016.03.21

コメント

タイトルとURLをコピーしました