How do I get the input element to be selected? (text highlighted)

Question

I need your help,

Currently, when I click the 'rename' button, all works well as it should, but i'd like to add functionality such that not only is the original text value of the LI inside the input box but to also automatically make the text (highlighted) resulting in the pic below:

Here is the fiddle: http://jsfiddle.net/nc4pow56/1/

The code in question

$(function(){
    $('#colors li').click(fn);

    $('button').click(fn);

    function fn(e){
    var el = $('li.active');
    if(e.target.type != "button"){
            el.removeClass('active');
            $(e.target).addClass('active');
    }else{  
        var txt = el.text(); 
        var newEl = $("<input>");
        newEl.blur(function(){
            el.html(newEl.val());       
        });
        newEl.val(txt);
        el.html(newEl);  
        newEl.focus();
    }     
    }   
})();

Answer 1

try this newEl.focus().select()

Full Code:

$(function(){
    $('#colors li').click(fn);

    $('button').click(fn);

    function fn(e){
    var el = $('li.active');
    if(e.target.type != "button"){
            el.removeClass('active');
            $(e.target).addClass('active');
    }else{  
        var txt = el.text(); 
        var newEl = $("<input>");
        newEl.blur(function(){
            el.html(newEl.val());       
        });
        newEl.val(txt);
        el.html(newEl);  
        newEl.focus().select();
    }     
    }   
})();

Hope this helps

Answer 2

Replace newEl.focus() with newEl[0].select(); (demo).