CODEWITHSUNDEEP
javascriptjqueryhtml
Ravi Hamsa
Ravi Hamsa

Reputation: 4721

How to simulate editable click on content editable element

Here is my html code

<ul class="options-list">
    <li contenteditable="true">Customer List</li>
    <li contenteditable="true">Product List</li>
</ul>

When user click on first li, content becomes editable, same happens on second div. Now requirement is, while editing on first li, if user presses enter key, I need to stop editing first li and move to second li and auto initiate edit mode.

Here is my JS code 

$('.options-list').on('keypress', 'li', function (e) {
    if (e.keyCode === 13) {
        $(e.currentTarget).blur(); //this works
        $(e.currentTarget).siblings('li').click(); // this doesn't work
        return false;
    }
})

Any help would be appreciated

Upvotes: 1

Views: 1306

Answers (3)

Tasos K.
Tasos K.

Reputation: 8087

Instead of .click(), you can use .focus().

For example:

$('.options-list').on('keypress', 'li', function (e) {
    if (e.keyCode === 13) {
        $(e.currentTarget).blur(); 
        $(e.currentTarget).siblings('li').focus(); 
        return false;
    }
})

A jsfiddle demo is here.

Upvotes: 1

HumptyDumptyEIZ
HumptyDumptyEIZ

Reputation: 374

Change $(e.currentTarget).siblings('li').click(); to $(e.currentTarget).next('li').focus();

Upvotes: 1

Swati
Swati

Reputation: 862

Instead of using .siblings('li').click();

you can use .next('li').focus();

This would help you to move the focus to next li element,

also .siblings('li') would move it last li element of the list,

but .next() would move the focus to next li element consecutively.

Try this jsfiddle demo example

Thanks.

Upvotes: 0

Related Questions