jQuery – 東京発、雲に乗って

2024年7月9日

【jQuery】jquery.validate.jsで任意のclassに対して独自のバリデーションを設定する

例えば、validation-alphaというクラスが指定されたら半角英字のみ入力可能にしたいとき

JavaScript

$.validator.addMethod(
  "alpha",
  function (value, element) {
    return this.optional(element) || /^([a-zA-Z]+)$/.test(value);
  },
  "半角英字を入力してください"
);
$.validator.addClassRules(
  "validation-alpha", {
    alpha: true,
  }
);

$.validator.addMethod(

"alpha",

function (value, element) {

return this.optional(element) || /^([a-zA-Z]+)$/.test(value);

"半角英字を入力してください"

);

$.validator.addClassRules(

"validation-alpha", {

alpha: true,

}

);

HTML

<input type="text" class="validation-alpha" />

1	<input type="text" class="validation-alpha" />

2020年9月7日2023年2月7日

【jQuery】フォームの入力値をトリム＆半角変換

数字を入力されたら即計算するようなフォームで使用

// トリム & 全角を半角に
$('input:text').each(function(key, val) {
  var str = $(this).val();

  str = str.trim();

  var str2 = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
  });
  $(this).val(str2);
});

// トリム & 全角を半角に

$('input:text').each(function(key, val) {

var str = $(this).val();

str = str.trim();

var str2 = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {

return String.fromCharCode(s.charCodeAt(0) - 65248);

});

$(this).val(str2);

});

2017年10月30日2017年11月10日

jQueryでスタイルに!importantを指定する

jQueryでスタイルを設定する方法は、基本的に以下のような記述ですが

$(セレクタ).css('margin', '10px');

1	$(セレクタ).css('margin', '10px');

スタイルに!importantを指定する場合は、この方法は使用できません。

// これは反映されない
$(セレクタ).css('margin', '10px !important');

1 2	// これは反映されない $(セレクタ).css('margin', '10px !important');

!importantを指定する場合はcssTextを使用します。

$(セレクタ).css('cssText', 'margin: 10px !important;');

1	$(セレクタ).css('cssText', 'margin: 10px !important;');

ただし、このcssTextはスタイルを置き換えるメソッドですので
他で指定されているスタイルは無効になりますので注意が必要です。

2017年5月26日2017年6月14日

【jQuery】短いページだけフッターを最下部に固定する

ページのコンテンツが少ないなど、フッターを含めたページの縦幅がブラウザの縦幅より短い場合があると思います。
そのようなページでフッターをそのままコンテンツにつなげると、フッターの下にさらに余白ができてしまい、なんだかカッコ悪いですよね。
かといって、position: fixed で常にフッターを固定すると、今度は長いページでもフッターが常に残ってしまいます。

そこで、ページの縦幅がブラウザの縦幅より短い場合だけ
position: fixed を指定してみます。

まずはページサイズとブラウザサイズを取得

var page_size = {
  w : $(window).width()
 ,h : $(window).height()
};
var browser_size = {
  w: document.body.clientWidth
 ,h: document.body.clientHeight
};

var page_size = {

w : $(window).width()

,h : $(window).height()

};

var browser_size = {

w: document.body.clientWidth

,h: document.body.clientHeight

};

両者を比較して、ページサイズが短い場合にpositionをfixedにします。

if(page_size.h > browser_size.h) {
  $('フッターのセレクタ').css('position', 'fixed');
  $('フッターのセレクタ').css('bottom', '0px');
  $('フッターのセレクタ').css('width', '100%'); /* 必要なら */
}
else {
  $('フッターのセレクタ').css('position', 'static');
  $('フッターのセレクタ').css('bottom', '');
  $('フッターのセレクタ').css('width', ''); /* 必要なら */
}

if(page_size.h > browser_size.h) {

$('フッターのセレクタ').css('position', 'fixed');

$('フッターのセレクタ').css('bottom', '0px');

$('フッターのセレクタ').css('width', '100%'); /* 必要なら */

}

else {

$('フッターのセレクタ').css('position', 'static');

$('フッターのセレクタ').css('bottom', '');

$('フッターのセレクタ').css('width', ''); /* 必要なら */

}

注意すべき点して、
上記の処理は基本的にページロードの最後に呼べばよいのですが、
動的にコンテンツが増えたり減ったりするページの場合は
その都度、上記の処理を呼ぶ必要があります。

2017年4月28日2017年4月28日

【jQuery】イベントが重複登録されるのを防ぐ簡単な方法

まずイベントハンドラの登録は

$(セレクタ).on('click',function() {
  // 処理
}

$(セレクタ).on('click',function() {

// 処理

}

という感じですが、
JavaScriptによってコンテンツを動的に増やせるようなページを作成しているときに
イベントハンドラの登録がどんどん重複されていくという問題がありました。

解決方法はいくつかありますが、そのとき一番簡単だった解決方法は

onの前にoffを呼ぶ

でした。

$(セレクタ).off('click');
$(セレクタ).on('click',function() {
  // 処理
}

$(セレクタ).off('click');

$(セレクタ).on('click',function() {

// 処理

}

これだけですが、期限に追われ余裕がないときは
なかなか気が付かないものですね。