Блог

При нажатии на мое контекстное меню (щелкните правой кнопкой мыши пользовательское меню) у меня установлено несколько вариантов. Приведенный ниже фрагмент предназначен для переименования папки ( li > a значение меню), который скрывает ссылку внутри <li>...</li> и добавляет поле ввода.

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

Вы щелкаете правой кнопкой мыши и выбираете опцию «переименовать». Затем вы должны щелкнуть внутри этого поля ввода и либо нажать enter, либо за пределами поля, чтобы произошло обратное.

Как я могу сделать так, чтобы при нажатии на переименование текст в добавленном <input> выделялся и, следовательно, фокусировался в?

Для достижения этой цели вы можете использовать функцию jQuery focus() для элемента.

Изменив свой before() вызов на insertBefore() call, вы можете привязать 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 /