入力フォームなどで、フォーカスが外れた時に、特定の処理を実行することができるblur()について今回はまとめていきたいと思います。

blur()の使い方

blur()は入力フォームなどで、入力欄からフォーカスが外れたタイミングでイベントを実行できる関数です。

$('input[type="text"]').on('blur', function() {
   // 実行したい処理
});

フォーカスが外れた時に行いたい変換処理

前後のスペースを削除

$('input[type="text"]').on('blur', function() {
    // 前後のスペースを削除
    let $this = $(this);
    let str = $this.val();

    str = $.trim(str);
    $this.val(str);
});

文中のスペースを削除

$('input[type="text"]').on('blur', function() {
    // 文中のスペースを削除
    let $this = $(this);
    let str = $this.val();

    str = str.replace(/\s+/g, '');
    $this.val(str);
});

全角英数から半角英数へ変換

// 半角英数に変換
function convertStrHalf(str) {
    return str.replace(/[A-Za-z0-9]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0)-0xFEE0);
    });
}

$('input[type="text"]').on('blur', function() {
   let $this = $(this);
   let str = $this.val();
  // 半角英数に変換
   $this.val(convertStrHalf(str));
});

半角英数から全角英数へ変換

// 全角英数に変換
function convertStrFull(str) {
    return str.replace(/[A-Za-z0-9]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
    });
}

$('input[type="text"]').on('blur', function() {
   let $this = $(this);
   let str = $this.val();
  // 全角英数に変換
   $this.val(convertStrFull(str));
});

ひらがなをカタカナへ変換

// カタカナに変換
function convertStrKana(str) {
    return str.replace(/[ぁ-ん]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) + 0x60);
    });
}

$('input[type="text"]').on('blur', function() {
   let $this = $(this);
   let str = $this.val();
  // カタカナに変換
   $this.val(convertStrKana(str));
});

カタカナをひらがなに変換

// ひらがなに変換
function convertStrHira(str) {
    return str.replace(/[ァ-ン]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0x60);
    });
}

$('input[type="text"]').on('blur', function() {
   let $this = $(this);
   let str = $this.val();
  // ひらがなに変換
   $this.val(convertStrHira(str));
});

半角カタカナを全角カタカナへ変換

// 全角カタカナに変換
function convertStrKanaFull(str) {
  return str.replace(/[ぁ-ん]/g, function(str) {
        return String.fromCharCode(str.charCodeAt(0) + 96);
    });
}

$('input[type="text"]').blur(function() {
    // 全角カタカナに変換
    let $this = $(this);
    let str = $this.val();
   
    let h = ['ガ', 'ギ', 'グ', 'ゲ', 'ゴ', 'ザ', 'ジ', 'ズ', 'セ', 'ゾ', 'ダ', 'ヂ', 'ヅ', 'デ', 'ド', 'バ', 'ビ', 'ブ', 'ベ', 'ボ', 'パ', 'ピ', 'プ', 'ペ', 'ポ', 'ヴ', 'ァ', 'ア', 'ィ', 'イ', 'ゥ', 'ウ', 'ェ', 'エ', 'ォ', 'オ', 'カ', 'キ', 'ク', 'ケ', 'コ', 'サ', 'シ', 'ス', 'セ', 'ソ', 'タ', 'チ', 'ッ', 'ツ', 'テ', 'ト', 'ナ', 'ニ', 'ヌ', 'ネ', 'ノ', 'ハ', 'ヒ', 'フ', 'ヘ', 'ホ', 'マ', 'ミ', 'ム', 'メ', 'モ', 'ャ', 'ヤ', 'ュ', 'ユ', 'ョ', 'ヨ', 'ラ', 'リ', 'ル', 'レ', 'ロ', 'ワ', 'ヲ', 'ン'];
    
    let z = ['ガ', 'ギ', 'グ', 'ゲ', 'ゴ', 'ザ', 'ジ', 'ズ', 'セ', 'ゾ', 'ダ', 'ヂ', 'ヅ', 'デ', 'ド', 'バ', 'ビ', 'ブ', 'ベ', 'ボ', 'パ', 'ピ', 'プ', 'ペ', 'ポ', 'ヴ', 'ァ', 'ア', 'ィ', 'イ', 'ゥ', 'ウ', 'ェ', 'エ', 'ォ', 'オ', 'カ', 'キ', 'ク', 'ケ', 'コ', 'サ', 'シ', 'ス', 'セ', 'ソ', 'タ', 'チ', 'ッ', 'ツ', 'テ', 'ト', 'ナ', 'ニ', 'ヌ', 'ネ', 'ノ', 'ハ', 'ヒ', 'フ', 'ヘ', 'ホ', 'マ', 'ミ', 'ム', 'メ', 'モ', 'ャ', 'ヤ', 'ュ', 'ユ', 'ョ', 'ヨ', 'ラ', 'リ', 'ル', 'レ', 'ロ', 'ワ', 'ヲ', 'ン'];

    for (i = 0; i <= h.length; i++) {
        str = str.split(h[i]).join(z[i]);
    }
    
    $this.val(convertStrKanaFull(str));

});

blur()とfocusout()の違い

blur()とfocusout()はどちらもフォーカスが外れたタイミングでイベントを実行できる関数という点では似ていますが、その影響範囲が異なります。

blur()はフォーカスした要素に対してのみですが、focusout()は子要素にまでその影響範囲が広がります。formタグにblur()とfocusout()イベントを設定して違いを見てみましょう。

See the Pen Untitled by gri-t (@gri-t) on CodePen.

input要素にフォーカスした後、フォーカスを外すと、focusout()イベントのCSSだけが適用されました。これはformに指定したイベントが子要素のinputにも影響しているからです。

  • blur():は子要素にイベントが影響しない
  • focusout():は子要素にイベントが影響する