2

私はjQueryTag-Itを使用しています！私のプロジェクトで。onfocusイベントが発生したときにオブジェクトの境界線を表示したいのですが、機能させることができません。

私のコード：

<ul id="TagsDesc" name="nameOfSelect" runat="server" ></ul>

<script type="text/javascript">
   $(document).ready(function () {
      $('#<%=TagsDesc.ClientID %>').focus(function () {
         $(this).css("border", "1px solid");
      });

      $('#<%=TagsDesc.ClientID %>').tagit({ 
        'maxTags': 10,'minLength': 1,
        'maxLength': 12,
        'tagsChanged': showTags
      });

      function showTags() {
         var tags = $('#<%=TagsDesc.ClientID %>').tagit("tags");
         var tagsContainer = $('#<%=tagsContainer.ClientID %>');
         var res = '';
         for (var i in tags)
            res += ',' + tags[i].value;
         tagsContainer.val(res);
      }
   });
</script>

何かアイデアをお願いしますか？

4

2 に答える 2

6

focus イベントは、実際にはフォーカス可能な要素にのみ適用されます。( <input>、<select>など)

ulまたはli、デフォルトではフォーカス可能ではありません。

focus イベントは、要素がフォーカスを取得したときに送信されます。このイベントは、フォーム要素 ( 、 など) やリンク ( ) など、限られた一連の要素に暗黙的に適用さ<input>れ<select>ます<a href>。最近のブラウザ バージョンでは、要素の tabindex プロパティを明示的に設定することで、イベントを拡張してすべての要素タイプを含めることができます。要素は、Tab キーなどのキーボード コマンドを使用するか、要素をマウスでクリックすることによって、フォーカスを得ることができます。

回避策の 1 つはtabidex、完全にクロス ブラウザーかどうかわからない、フォーカス可能にしたい要素で使用することです。を追加するtabindexと、キーボードによって強制的にフォーカスされるため、ほとんどの要素がフォーカス可能になります。

css 値を設定するに:focusは、jquery を使用する代わりに疑似セレクターを使用できます。

.focusableelement:focus{
  border: 1px solid red;
  }

tagit の具体的な回答:

focusクラスで入力にイベントを適用し、クラスui-widget-content ui-autocomplete-inputで親要素の境界を変更しますtagit ui-widget ui-widget-content ui-corner-all

于 2012-09-01T09:07:17.330 に答える
1

You have to attach event handlers on the input field created by tag-it. It's a bit of a DOM traversing hassle, but this worked for me using jQuery 1.11 and tag-it 2.0:

  $("#selector")
    .tagit({
       // whatever you need
    })
    // bind events on tag-it's input field 
    .siblings("ul.tagit")
    .first()
    .find("input:first")
    .on("focus", function() {
      $(this).closest("ul.tagit").addClass("focus");
    })
    .on("blur", function() {
      $(this).closest("ul.tagit").removeClass("focus");
    });

Now add appropriate CSS rules in your stylesheet:

ul.tagit.focus {
  border: 1px solid;
}
于 2014-05-23T13:53:26.360 に答える