Question

点击我的上下文菜单（右键单击自定义菜单）后，我设置了多个案例。下面的代码段是用于重命名文件夹（菜单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();
        }
    });
});

右键单击并选择“重命名”选项。然后，您必须在此输入字段中单击，然后点击输入或字段外部以进行相反的操作。

如何点击重命名后，附加的<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/

JS / jQuery＆gt;在附加输入中突出显示文本

1 个答案: