Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.
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文の省略形または代替手段として利用する。3つの値・式を必要とする特殊な演算子。
条件式 ? Trueの処理 : Falseの処理

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした