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

【问题标题】：Put the cursor at the end of jeditable textbox将光标放在可编辑文本框的末尾
【发布时间】：2015-03-17 17:28:37
【问题描述】：

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

我在这里尝试了几个专注于输入字段的可用解决方案，它们在静态文本框上工作，但我无法让它们与这个 jeditable 插件一起工作。任何帮助将不胜感激。

这是在这个插件上工作的 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',              
               });

        });

    });

【问题讨论】：

标签： jquery input jeditable onfocus

【解决方案1】：

好的，找不到jeditable 插件的解决方案，但插件x-editable 满足了我的要求。

【讨论】：

【解决方案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

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

【讨论】：