title: How do I get the input element to be selected? (text highlighted)
body: <p>I need your help,</p>
  
  <p>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:</p>
  
  <p><img src="https://i.stack.imgur.com/4zQci.png" alt="enter image description here"></p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/nc4pow56/1/" rel="nofollow noreferrer">http://jsfiddle.net/nc4pow56/1/</a></p>
  
  <p>The code in question</p>
  
  <pre><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 = $("&lt;input&gt;");
          newEl.blur(function(){
              el.html(newEl.val());       
          });
          newEl.val(txt);
          el.html(newEl);  
          newEl.focus();
      }     
      }   
  })();
  </code></pre>