JS/jQuery>追加されたImputのテキストをハイライト

Question

私のコンテキストメニュー（カスタムメニューを右クリック）をクリックすると、複数のケースが設定されています。以下のスニペットは、<li>...</li>内のリンクを隠し、入力フィールドを追加するフォルダ（メニューli > a値）の名前を変更するために設定されたスニペットです。

$(document).ready(function() { 
    "use strict";  

    $(document).on('mousedown', function(e) { 
     if ($(e.target).parent().hasClass('custom-menu')) { 
      switch (action) { 
       case 'rename-folder': 

        anchor = clicked.find('a').first(); 
        anchor.before($('<input />', { 
         type: 'text', 
         value: $(anchor).text(), 
         'class': 'FolderRenaming', 
         focusout: function() { 
          $(this).siblings('a').html($(this).val()).show(); 
          $(this).remove(); 
          $(anchor).parent().removeClass('clicked'); 
         } 
        })).hide(); 
        break; 
      } 
     } 
    }).on('keyup', 'input.rename', function(e) { 
     e.preventDefault(); 
     if (e.keyCode === 13) { 
      $(e.target).focusout(); 
     } 
    }); 
}); 

右クリックし、[名前を変更する]オプションを選択します。この入力フィールド内をクリックして、フィールドの入力または外部を押して、逆の処理を実行する必要があります。

名前を変更するにはどうすればいいですか？添付された<input>内のテキストは強調表示されています。

Answer 1

これを実現するには、要素に対してjQuery focus()関数を使用できます。

before()コールを変更して、insertBefore()コールに変更すると、追加する要素にfocus()メソッドをチェーンできます。

case 'rename-folder': 

    anchor = clicked.find('a').first().hide(); 
    $('<input />', { 
     type: 'text', 
     value: $(anchor).text(), 
     'class': 'FolderRenaming', 
     focusout: function() { 
      $(this).siblings('a').html($(this).val()).show(); 
      $(this).remove(); 
      $(anchor).parent().removeClass('clicked'); 
     } 
    }).insertBefore(anchor).focus(); 
    break; 

私はあなたのコードがちょうどスニペットだったとして、上記をテストしていませんが、ここでは上記の基本的な実装を作成しました： あなたのフィドルしかしにこれを実装しようとするとうまく動作https://jsfiddle.net/michaelvinall/w6q09rzs/1/