Question

我正在使用jeditable插件进行内联编辑。当我双击要编辑的字段时，光标会保持在该值之前。文本框的值是动态生成的。我想要一些东西，当我点击新建文件夹时，光标应保持在文件夹的末尾。这是我的直播Website，您可以从左侧边栏添加新文件夹，然后双击生成的新文件夹。

我在这里专注于输入字段尝试了一些可用的解决方案，它们在静态文本框上工作，但我无法使用这个可插入的插件。任何帮助将受到高度赞赏。

这是在这个插件上工作的jsfiddle。 JSFIDDLE

以下是我在列表中生成可编辑文件夹的代码。

    $('document').ready(function () {

            txt_box = "<li class='animated bounceInDown foldertobedeleted' data-toggle='context' data-target='#context-menu' ><a class='folderlink'><span style='background-color:" + favorite + "' class='foldercount'>0</span><span class='editable foldername'>New Folder</span></a></li>";
            $("#folderlist li:last").before(txt_box);


            $('.editable').editable(function (value, settings) {
                console.log(this);
                console.log(value);
                console.log(settings);
                return (value);
            }, {
                type: 'text',
                onblur: 'ignore',
                event: 'dblclick',
                tooltip: "Double Click to edit",
                style: 'display: inline; ',
                width: '125px',              
               });

        });

    });

Answer 1

好的，无法找到jeditable插件的解决方案，但插件x-editable符合我的要求。

Answer 2

我真想花时间获得 jeditable <textarea> 的jQuery引用。我浏览了文档和许多SO帖子。显然，<textarea>会隐藏并播放，并且在禁用时不在HTML中。最终想出了这种方法。

给出已应用 jeditable 的div：

editableTextDiv.editable(..);

设置何时将<textarea>添加到 jeditable 容器div中的侦听器

当对象存在<textarea>时，请设置光标位置

editableTextDiv.bind('DOMSubtreeModified',function(){

    console.log('editableTextDiv textarea changed');

    let self = $(this);
    let selfHtml = self.html();

    let isAlreadyProcessed = (selfHtml.indexOf('autogrow') > 0);
    if (isAlreadyProcessed === true){

        // console.log('self.html(): ' + self.html());
        console.log('skipping known data for inputNote [DOMSubtreeModified]');
        return;
    }

    let divTextarea = self.find('textarea');
    let isTextareaReady = (divTextarea.length > 0);
    if (isTextareaReady === true){

        console.log('inputNote gets [DOMSubtreeModified]');
        console.log('self.html(): ' + self.html());

        divTextarea.prop('selectionStart', 5);
    }
});

非常感谢这篇文章：https://stackoverflow.com/a/39424751/2162226

..有关检测标签内容变化的解决方案

将光标放在可编辑文本框的末尾

2 个答案: