如何獲得要選擇的輸入元素？ （文字突出顯示）

Question

我需要你的幫助，

目前，當我單擊“重命名”按鈕時，所有功能都可以正常運行，但是我想添加功能，以便不僅在輸入框中輸入LI的原始文本值，還可以自動生成文本（高亮顯示），結果如下圖所示：

這是小提琴： http : //jsfiddle.net/nc4pow56/1/

有問題的代碼

$(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

將newEl.focus()替換為newEl[0].select(); （ 演示 ）。

Answer 2

試試這個newEl.focus().select()

完整代碼：

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

希望這可以幫助