1

最初にこの例http://jsfiddle.net/Es5qs/を参照してください。スペースを区切り文字として保持してタグを作成しますが、textbox1 に何かを入力すると、textbox2 のタグとして反映され、私のコードが聞こえます。私はこれを行うことができます。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="jquery-ui.js"></script>

<script>

$(document).ready(function() {

    $("#textBox").keyup(function() {

        $("#message").val(this.value);
    });


});

$(document).ready(function() {

  //The demo tag array
  var availableTags = [
    {value: 1, label: 'tag1'},
    {value: 2, label: 'tag2'},
    {value: 3, label: 'tag3'}];

  //The text input
  var input = $("input#text");

  //The tagit list
  var instance = $("<ul class=\"tags\"></ul>");

  //Store the current tags
  //Note: the tags here can be split by any of the trigger keys
  //      as tagit will split on the trigger keys anything passed  
  var currentTags = input.val();

  //Hide the input and append tagit to the dom
  input.hide().after(instance);

  //Initialize tagit
  instance.tagit({
    tagSource:availableTags,
    tagsChanged:function () {

      //Get the tags            
      var tags = instance.tagit('tags');
      var tagString = [];

      //Pull out only value
      for (var i in tags){
        tagString.push(tags[i].value);
      }

      //Put the tags into the input, joint by a ','
      input.val(tagString.join(','));
    }
  });

  //Add pre-loaded tags to tagit
  instance.tagit('add', currentTags);
});
</script>
</head>
<body>
    <div>
        TextBox 1 : <input type="textbox" id="textBox"></input>
        TextBox 2 : <input type="text" id="message" name="tags"/></input>

    </div>
</body>
</html>
4

1 に答える 1

2

jsfiddle のデモ。主なアイデアは、毎回文字列全体を見て、すべての要素を単純に再作成することです。これにより、重複チェックなどを回避できます。大量のテキストを処理したくない限り、パフォーマンスに関しては問題ありません。

と交換keypressしkeydownて、バックスペースもキャプチャしました。さらに、スペースだけでなく、すべてのキーで実行されます。キーダウン リスナーの内部:

    tags = this.value.split(/\s+/);
    $(".target").html(""); //clear
    $.each(tags, function (ind, tag) {
        $(".target").append("<a href='#' class='tag'>" + tag + "</a>");
    });

まず、最初のテキスト ボックスの入力がスペースで分割されます。正規表現は、連続するスペースにも一致します。この方法でhuman beingは、まだ 2 つのタグしか作成されません。次に、ターゲットの以前のタグがクリアされます。最後に、利用可能なすべてのタグを繰り返し処理し、それらのリンク要素を作成します。

注: これらのタグの作成方法は変更していません。のようなものに切り替えることを強くお勧めし$(".target").append($("<a href='#' class='tag'>").text(tag));ます。これは入力をエスケープするため、ユーザーは HTML タグを含めてサイトを壊すことができません。たとえば<b>、jsfiddle デモに入力するとどうなるか試してください。

于 2013-08-10T06:35:44.177 に答える