JavaScript、jQuery復習(文字カウント、テキストエリアにタグ挿入)

qiita.rb

<div class="text tag">
 <h4>小説本文 ※10000文字まで</h4>
 <div class="arrange">
  <div class="jquery-button">
   <button type="button" class="bold">太字</button>
  </div>
  <div class="jquery-button">
   <button type="button" class="small-script">小字</button>
  </div>
  <div class="jquery-button">
   <button type="button" class="big-script">大文字</button>
  </div>
 </div>
 <div class="clearfix"></div>
 <p id="example">例： ＜strong＞<strong>文字が太くなる</strong>＜/strong＞</p>
 <div>
  <%= f.text_area :text, :maxlength => 10000,  class: "text-area area txt-field-2", id: 'txt-field-2', value: @draft.text %>
  <p class="count_num_2">現在0文字</p>
 </div>
</div>

qiita.js

$(document).ready(この中にjQuery)
省略形　
$(function({この中にjQuery});

HTMLの読込が完了してからJQueryによる操作を開始するためreadyイベントを使用。　

トリガー部分

qiita.js

$(function({
 $(".trigger").click(function(){
  $(this).next().toggle();
 });
});

トリガー部分(".trigger")をクリックするたびに、(".trigger")の兄弟要素にあたる部分を表示、非表示にする。(this)を付けることでクリックされた(".trigger")のみ取得。

文字カウント

qiita.js

$(function()
 $('.txt-field-2').on('keydown keyup keypress change', function(){
  //現在入力されている文字を取得
  var str = $(this).val();
  //取得した文字から改行を削除
  str = str.replace(/\n/g, '');
  //現在の文字数
  var strCount = "現在" + str.length + "文字";
  //リアルタイムで文字数を表示
  $(".count_num_2").html(strCount);
 });
});

on()メソッドで()内のイベントが発生した場合、関数内の処理を行う様に設定。
keydown:キーボードのキーを押したとき発生するイベント
keyup:キーボードのキーを離したとき発生するイベント
keypress:キーボードの文字キーが押されたとき、もしくは押され続けている時。
change:フォーム部品の状態に何らかの変化があったとき

機能ボタン：太字（フォーム内の一部の文字を太字にするための機能）

qiita.js

$(function(){
 //txt-field-2というidをもつhtmlを探し出し、変数fieldに代入。
 var field = document.getElementById('txt-field-2');
 //挿入したいhtmlタグを配列として挿入
 var tag = new Array('<b>', '</b>');
 $(".bold").click(function(){
  //テキストエリアのカーソルの選択開始の位置を取得
  var start = field.selectionStart;
  //テキストエリアのカーソルの選択終了の位置を取得
  var end = field.selectionEnd;
  //選択テキストの長さ
  var selected = end - start;
  //選択テキスト
  //三項演算子を使い、変数selectedに値があれば、substrメソッドで開始位置をstartを引数とし、切り出す長さをselectedを引数としてテキストを選択
  var target = selected ? field.value.substr(start, selected) : '';
  //選択中のテキストを'<b>','</b>'で囲むように設定し、valueメソッドで表示
  //field.value.substr(0, start)で選択された文字列よりも前を、field.value.substr(end, field.value.length)で選択された文字列よりも後ろを取得しておく。でないとボタンをクリックした時にそれらの部分が上書きされる。
  field.value = field.value.substr(0, start) + tag[0] + target + tag[1] +field.value.substr(end, field.value.length);
  //'<b>~</b>'の部分を選択状態にする
  field.focus();
  field.setSelectionRange(start, (start + tag[0].length + selected + tag[1].length));
 });
});

・三項演算子
if文の省略形または代替手段として利用する。３つの値・式を必要とする特殊な演算子。
条件式 ? Trueの処理 : Falseの処理