Is it possible to start editing of input exactly where click happened when input is created after click?

Question

Imagine a situation, I've a text, once user clicks this text it is transformed into an input with same text which user clicked as a value.

I'm wondering if it is possible to make cursor appear exactly where click happened in the first place?

http://jsfiddle.net/nmaqa/

In this example, user first clicks to activate editing, and than he needs to click again where he wants cursor to appear.

$(document).on("click", ".click li.editable", function(){
        //
        var item = $(this);
        item.removeClass("editable");
        var word = item.html();
        item.empty();
        item.append('<input class="quick-edit" type="text" name="quick_edit" value="'+ word +'" />');
        $(".quick-edit").focus();
        //
    });

this can help to set the position [http://stackoverflow.com/a/499158/2359055](http://stackoverflow.com/a/499158/2359055) — Abraham Uribe, Oct 31 '13 at 23:46
This looks like what you need [Source](http://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div?rq=1) Check out the fiddle in the comments of the accepted solution. — linstantnoodles, Oct 31 '13 at 23:49

score 0 · Answer 1 · answered Oct 31 '13 at 23:35

Yes it can be possible html

<ul class="click">
<li contenteditable = true class="editable">Text</li>
<li class="editable" contenteditable = true>Text</li>

and javascript

$(document).on("click", ".click li.editable", function(){
    //
    var item = $(this);
    item.removeClass("editable");
    var word = item.html();
    item.empty();
    item.append('<input class="quick-edit" type="text" name="quick_edit" value="'+ word +'" />');
    $(".quick-edit").focus();
    //
});
   $('.editable:first').focus()

Please update code or check ik fiddle http://jsfiddle.net/nmaqa/1/

I think you misunderstood my question. – Nov 01 '13 at 09:51 — , Nov 01 '13 at 09:51

score 0 · Accepted Answer · answered Nov 01 '13 at 10:40

I'm wondering if it is possible to make cursor appear exactly where click happened in the first place?

We have a property for any html element called contentEditable take a look at this sample and see that what you want to implement, is a default behavior.

<div class="prompt" contentEditable=true>
    write the html code  <span style="background-color:blue;">here</span>
</div>

It's important to note that you don't need to implement this logic of replacement to enable an edit on a text element.

Is it possible to start editing of input exactly where click happened when input is created after click?

2 Answers2