javascript - ブートストラップタグ入力を使用してタグに変換する前にタグを処理する

Question

サイトでブートストラップ タグ入力を使用しています。基本的に私がやろうとしているのは、テキスト フィールドに URL を入力するようにユーザーに依頼することです。テキストが有効な URL である場合は、それをタグに変換するだけです。

タグに変換する前にテキストを処理する方法はありますか?

どんな助けでも感謝します。

ありがとう

Answer 1

Bootstrap タグには、項目が追加される直前にトリガーされるbeforeItemAddイベントがあります。ブートストラップ タグ

$('input').on('beforeItemAdd', function(event) {
    /* Validate url */
    if (/^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(event.item)) {
        event.cancel = false;
    } else {
        event.cancel = true;
    }
});

Answer 2

入力 ID が「tag-input」の場合、次beforeItemAddのようにライブラリ自体が提供するコールバックを使用するだけです。

$('#tag-input').on('beforeItemAdd', function(event) {
        var tag = event.item;

        if(true){ //if tag is not a url or process other text conditions.
          event.cancel = true
        }
});

event.cancelfalse に設定しない場合、addは通過します。

このメソッドに関するドキュメントはこちらで確認できます。

また、この場合、ドキュメントにはイベントをキャンセルする方法が記載されていないことは明らかです。そのような場合、コード自体をチェックするだけで十分簡単です。この場合、プラグイン github リポジトリのこのコードにより、このオプションの使用方法が明確になります。