Put the cursor at the end of jeditable textbox

Question

I am using jeditable plugin for inline editing. When I double click on the field to edit, the cursor stays ahead of the value. The value of the textbox is dynamically generated. I want something that when I click on New Folder, cursor should stay at the end of FOLDER. Here's my live Website , Where u can add a New Folder from the left sidebar and double click on generated New Folder.

I have tried few available solutions here on focus on input field, they work on a static textbox, but I couldn't make them work with this jeditable plugin. Any help will be highly appreciated.

Here's the jsfiddle to work on this plugin. JSFIDDLE

Below is my code of generating the editable folder in a list.

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

        });

    });

score 0 · Answer 1 · answered Mar 18 '15 at 01:53

0

Okay, couldn't find solution for jeditable plugin, but plugin x-editable satisfied my requirement.

answered Mar 18 '15 at 01:53

8bitrebellion

180
1
2
12

Gene Bo · Answer 2 · 2019-05-03T20:15:40.307

I was having a heck of a time getting a jQuery reference to the jeditable <textarea> . I looked through the docs and many SO posts. Apparently the <textarea> plays hide & seek and is not in the HTML when disabled. Finally figured out this way to get to it.

Given some div where jeditable has been applied:

editableTextDiv.editable(..);

Set a listener for when the <textarea> is added into the jeditable container div

When you have the object with the <textarea> present, then set the cursor position

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

Big thanks to this post: https://stackoverflow.com/a/39424751/2162226

.. for the solution on detecting change for tag contents

Put the cursor at the end of jeditable textbox

2 Answers2