JS / jQuery>在附加输入中突出显示文本

Question

Upon clicking on my contextmenu menu (right-click custom menu), I have multiple cases set. The snippet below is the one set for renaming the folder (menu li > a value) which hides the link within the <li>...</li> and adds an input field.

$(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();
        }
    });
});

You right click and choose the option to 'rename'. You've then got to click within this input field and either hit enter or outside of the field for the reverse to take place.

How can I make it so upon clicking to rename, the text within the appended <input> is highlighted and therefore focused in?

Answer 1

You can use the jQuery focus() function on an element to achieve this.

By changing your before() call, to an insertBefore() call, you can chain the focus() method onto the element you are appending.

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;

I haven't tested the above, as your code was just a snippet, but have created a basic implementation of the above here: https://jsfiddle.net/michaelvinall/w6q09rzs/1/