jQuery Snippets #6

  • Posted on
  • Category : Tips
jQuery Snippets #6

基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストです。書いている内容に対して「もっとスマートにできる」とか「そもそも間違ってる」みたいなのがあれば、ツッコミ大歓迎なのでコメントなど通じて是非教えてください。

動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか、CodePenJSFiddleなどを利用して確認してください。

jQuery Snippets #6 目次

  1. 便利なtoggle系メソッド
    1. .toggle()
    2. .slideToggle()
    3. .fadeToggle()
    4. .toggleClass()
  2. チェックボックスをまとめてチェックする
  3. チェックされたら押下可能になるボタン
  4. 数字を自動的にカンマ(,)区切りにする
  5. 数字のみ入力できるようにする
  6. 全角入力された英数字を半角に変換する
  7. 半角入力された英数字を全角に変換する
  8. input要素にreadonlyやdisabledを指定する
  9. 現在入力されている文字数を表示する #1
  10. 現在入力されている文字数を表示する #2

1. 便利なtoggle系メソッド

例えばjQueryを使って要素を非表示にしたい時は.hide()を、逆に表示させたいという時は.show()を使うことで要素の表示・非表示を行うことができ、クラスの追加・削除を行いたい時は.addClass().removeClass()を使うことでその動きを実装することができます。
それぞれで実装したいのであればそのまま上記を記述すれば良いのですが、例えばクリックで表示・非表示を切り替えたいとか何らかのタイミングでクラスの追加・削除を行いたい時に便利なのがtoggle系のメソッドで、普段からそこまでjQueryを使わないという人でもこれに関しては覚えておいて損はないと思います。

動きの確認がしやすいHTML

以下でtoggle系メソッドを紹介していますが、それぞれ実際を動きを見たいという時は以下のHTMLと組み合わせて確認してもらうと、より動きがわかりやすいかと思います。
説明時のサンプルコードもこのdtddを用いた形で説明していきます。

HTML

<dl>
	<dt>title</dt>
	<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</dd>
</dl>

1-1. .toggle()

.toggle()は、ざっくり説明すると表示させる.show()と非表示にさせる.hide()を組み合わせたものになります。
例えば以下のように記述することでdt要素をクリックした際にddが表示されていた場合は非表示に、逆にdt要素をクリックした際にddが非表示の場合は表示されるという動きになります。

jQuery

$('dt').on('click', function() {
	$('dd').toggle();
});

ちなみに上記をそのまま記述した場合はパっと表示・非表示が切り替わりますが、.toggle('slow').toggle(1000)などのように記述することで表示・非表示の速度を指定することができます。
ただ、微妙な見栄えになるので個人的にはあまり指定することはありません…。

1-2. .slideToggle()

.slideToggle()は、要素をスライドしながら隠してくれる.slideUp()と要素をスライドしながら表示してくれる.slideDown()を組み合わせたものになり、よく見るアコーディオンの動きなどはこれを使うことで簡単に実装することができます。
例えば以下のように記述することでdt要素をクリックした際にddが表示されていた場合はスライドしながら非表示になり、逆にdt要素をクリックした際にddが非表示の場合はスライドしながら表示されるという動きになります。

jQuery

$('dt').on('click', function() {
	$('dd').slideToggle();
});

.slideToggle()の場合は先ほどの.toggle()とは違って上記の記述方法だけでもちょっとしたアニメーションな感じになりますが、スライド時のスピードを任意で調整したい時は.slideToggle('slow').slideToggle(1000)のように記述することで調整可能です。

1-3. .fadeToggle()

.fadeToggle()は、要素をフェードアウトさせる.fadeOut()と要素をフェードインさせる.fadeIn()を組み合わせたものになります。
例えば以下のように記述することでdt要素をクリックした際にddが表示されていた場合はフェードアウトされ、逆にdt要素をクリックした際にddが非表示の場合はフェードインするという動きになります。

jQuery

$('dt').on('click', function() {
	$('dd').fadeToggle();
});

こちらも上2つと同様で、.fadeToggle('slow').fadeToggle(1000)のように記述することでフェードするスピードを調整することが可能です。

1-4. .toggleClass()

.toggleClass()は、クラスを追加する.addClass()とクラスを削除する.removeClass()を組み合わせたものになり、例えば以下のように記述することでdt要素をクリックした際に「open」というクラスがdt要素についていない場合は追加され、逆に「open」というクラスがついている場合はクラスが削除されるという動きになります。

以下のサンプルコードは簡易的なアコーディオンを実装することができるものになり、単純なアコーディオンであれば上で紹介した.slideToggle()のみ使えばとりあえず実装できますが、アコーディオン展開時にdt要素の見栄えを変えたい時などにこの.toggleClass()が非常に便利で、CSSで「open」というクラスに対してスタイルを予め指定しておけばdd要素の展開時に加えてdt要素の見栄えを変えるという動きを実装することができます。

jQuery

$('dt').on('click', function() {
	$(this).toggleClass('open'); // ここが.toggleClass()を使用した記述
	$(this).next().slideToggle();
});

目次へ

2. チェックボックスをまとめてチェックする

ひとつのチェックボックスにチェックするだけで、指定したチェックボックス全てにチェックされるようにする方法です。
それぞれ以下のようなHTMLとjQueryを記述することで実装でき、サンプルコードではまとめてチェックされてほしいチェックボックスの指定に$('input[name="foo"]')name属性を使用していますが、それが嫌な場合はクラスで指定したりもできます。

HTML

<input id="check-all" type="checkbox" /> Check All
<input type="checkbox" name="foo" /> Checkbox 1
<input type="checkbox" name="foo" /> Checkbox 2
<input type="checkbox" name="foo" /> Checkbox 3

jQuery

$('#check-all').on('change', function() {
	$('input[name="foo"]').prop('checked', this.checked);
});

目次へ

3. チェックされたら押下可能になるボタン

フォームの確認や送信ボタン上などでよく見かける、チェックが入っていたらボタンを押せるようにする動きを実装する方法で、それぞれ以下のようなHTMLとjQueryを記述することで実装できます。

HTML

<input id="check" type="checkbox" /><label for="check">チェックを入れたらボタンが押せる</label>
<input id="submit" type="submit" value="Submit" />

jQuery

$('#submit').prop('disabled', true);
$('#check').on('change', function() {
	if ( $(this).prop('checked') == false ) {
		$('#submit').prop('disabled', true);
	} else {
		$('#submit').prop('disabled', false);
	}
});

目次へ

4. 数字を自動的にカンマ(,)区切りにする

金額を入力する箇所などで見やすくしたい場合や何からの理由で入力された数字を強制的にカンマ(,)区切りにしたい時に使える方法です。
以下のように記述することでカンマなしで数字を入力した場合でも、入力欄からフォーカスが外れると自動的にカンマ区切りされた状態で表示されるようになります。

jQuery

$('input').blur(function() {
	num = $(this).val().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
	$(this).val(num);
});

目次へ

5. 数字のみ入力できるようにする

関係ないキーを無効化させて、指定した要素では数字しか入力できるようにする方法です。
実装には以下のように記述し、先ほどのものと併せて使うのもいいですね。

jQuery

$('input').on('keypress', function(e) {
	if( (e.which!=8) && (e.which!=0) && (e.which<48 || e.which>57) ) {
		return false;
	}
});

目次へ

6. 全角入力された英数字を半角に変換する

input要素内に全角で入力された英数字をフォーカスが外れたタイミングで半角に変換する方法で、実装には以下のように記述します。

jQuery

$('input').blur(function() {
	var txt = $(this).val();
	txt = txt.replace(/[A-Za-z0-9]/g, function(s) {
		return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
	});
	$(this).val(txt);
});

目次へ

7. 半角入力された英数字を全角に変換する

先ほどとは逆にinput要素内に半角で入力された英数字をフォーカスが外れたタイミングで全角に変換する方法で、実装には以下のように記述します。

jQuery

$('input').blur(function() {
	var txt = $(this).val();
	txt = txt.replace(/[A-Za-z0-9]/g, function(s) {
		return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
	});
	$(this).val(txt);
});

目次へ

8. input要素にreadonlyやdisabledを指定する

jQueryを使ってinput要素にreadonlydisabledといった属性を指定したい場合は、それぞれ以下のように記述することで実装できます。

jQuery

// readonly属性を付加
$('input').prop('readonly', true);

// disabled属性を付加
$('input').prop('disabled', true);

目次へ

9. 現在入力されている文字数を表示する #1

指定した要素内(このサンプルではtextarea)に、現在何文字入力されているのかを表示させる方法です。
実装には以下のように記述し、ここでは文字数を表示させる箇所(<p>現在の文字数:<span class="count">0</span></p>の部分)もjQueryを利用して表示させていますが、もちろん普通にHTMLに書いて要素だけ指定する形でも問題ありません。

jQuery

$('textarea').after('<p>現在の文字数:<span class="count">0</span></p>');
$('textarea').on('keydown keyup change', function() {
	var txtLength = $(this).val().length;
	$('.count').text(txtLength);
});

目次へ

10. 現在入力されている文字数を表示する #2

先ほどのものに+αしたもので、現在入力されている文字数をに加えて上限数も表示させ、更に上限数をオーバーした場合にちょっとしたメッセージを表示するというものです。
(念のため記載しておくと、上限数以上は入力できないといった動きではないです)

実装には以下のように記述し、var limitの箇所で文字の上限数を指定するようになっています。

jQuery

var limit = 100;
$('textarea').after('<p>現在の文字数:<span class="count">0</span> / <span class="limit">' + limit + '</span></p><div class="over">文字数オーバーです</div>');
$('.over').css('color', 'red').hide();

$('textarea').on('keydown keyup change', function() {
	var txtLength = $(this).val().length;
	$('.count').text(txtLength);
	if( txtLength > limit ) {
		$('.count').css('color', 'red');
		$('.over').show();
	} else {
		$('.count').css('color', '');
		$('.over').hide();
	}
});

こちらも先ほどと同様で.after()を用いてカウント表示する場所などを表示させていますが、普通にHTMLに書く形でも実装できますし、.css()に関しても.addClass()などでクラスを付加させる形にして見栄えはスタイルシートを使うようにすれば多少はスッキリした記述になると思います。

目次へ

上記以外のjQuery Snippetsに関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。