ブートストラップタグを使用してタグに変換する前のプロセスタグ入力

Question

私は自分のサイトにブートストラップタグを入力しています。 基本的に何をしようとしているのですか？ urlをテキストフィールドに入力するようにユーザーに依頼してください。テキストが有効なURLであればタグに変換します。

タグに変換する前にテキストを処理する手段はありますか？

任意のヘルプは、appriciatedされます。

おかげ

Answer 1

ブートストラップタグは、アイテムが追加される直前にトリガ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 
     } 
}); 

あなたが設定されていない場合：

$('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

ブートストラップタグの入力を使用すると、コードに従うことによってそれを見つけるtagsに変換する前に、hidden入力を持っている：

$(".bootstrap-tagsinput input[type="text"]").keyup(function(){ 
// do your validation 
}); 

あなたのページに入るinspect elementでそれを見ることができます。 enter buttonを押した後にtagsに変換されます。隠れた入力になるまで検証を実行できます。

それはあるでしょう：

<div class="bootstrap-tagsinput"> 
<span class="tag label label-info">Test<span data-role="remove"></span></span> 
<input type="text" style="width: 7em;" size="1"> // here is! 
</div> 

Answer 3

ご入力されたIDは、「タグ入力」の場合Bootstrap tags、あなたがしなければならないすべてはそうのようなライブラリ自体によって提供さbeforeItemAddコールバックを使用していますevent.cancelをfalseに設定すると、addが処理されます。

この方法のドキュメントはhereで確認できます。

また、このケースでは、ドキュメンテーションはイベントをキャンセルする方法を明示していないことも明らかです。そのような場合は、コード自体をチェックするのに十分単純です。この場合、プラグインのgithub repoにあるthis codeは、このオプションの使い方を十分に明確にします。