jQueryプラグインでINPUT要素に消去ボタンをつける

仕事ではキーボードでゴリゴリ入力していますがプライベートではスマートフォンやタブレット端末などタッチパネル操作ばっかりになっている今日このごろ、みなさまいかがお過ごしでしょうか？

タッチパネル操作での文字入力は予測変換機能などの進歩もあり決して不便ではありませんが、それでもキーボードに慣れ親しんだ（ニワカ）身としては「やっぱり文字入力は物理キーボードじゃないとな！」と言ってはみんなから「このニワカが・・・」イヤな顔をされていますが、あの、アレ、アレです、スマートフォンの入力欄の端っこの方にある、入力文字を一括で消去するバツ印、アレはイイなぁ、と思います。

で、PHPSPOTさんにて、そのバツ印をWebのINPUT要素に付け加えてくれるAdd ClearというjQueryプラグインが紹介されていました。

Add Clearプラグインの導入は単純です。jQuery本体とプラグインファイルを読み込んだ後、とjQueryで適用させたい要素集合を抽出してaddClearメソッドを実行するだけです。

jQuery(function() {
    $(':text').addClear();
}

Add Clearプラグインには幾つかオプションがあります。消去ボタンはテキストです。addClearメソッドに引数を渡すことで変更ができます。まずは消去ボタンを変更してみましょう。closeSymbolオプションに文字列を渡すと、その文字列が消去ボタンとして表示されます。

jQuery(function() {
    $(':text').addClear({
         closeSymbol: '消去'
    });
}

今度は消去時に関数を実行してみましょう。onClearオプションに関数オブジェクトを渡すことで、INPUT要素の値を消去後に関数実行ができます。

jQuery(function() {
    $('.sample3').addClear({
        onClear: function () {
            alert('clear!');
        }
    });
}

このほかにも、消去後にINPUT要素にフォーカスを戻すreturnFocusオプション（デフォルトはtrue）や、入力時ではなくWebページ表示時にINPUT要素の値をチェックして消去ボタンを表示させるshowOnLoadオプション（デフォルトはfalse）、INPUT要素のフォーカスが外れると消去ボタンを非表示化するhideOnBlurオプションなどがあります。

topとrightというオプションもありますが、この記事の作成時のバージョンでは「全てのINPUT要素に一括適用されてしまう」という症状を確認しています。

このバツ印、全てのINPUT要素に付け加えればイイ、ってモノでもありませんが、ピンポイントで利用できると便利を実感できそうですね。