title: Click a button to open a input field with Blinking Cursor
body: <p>I have a Code that I got form my first post :<a href="https://stackoverflow.com/questions/16401965/need-help-about-a-function">Need help about a function</a></p>
  
  <p>I modified this code and trying to work like how I want .But I got Stuck in one point .</p>
  
  <p>JSfiddle LINK : <a href="http://jsfiddle.net/saifrahu28/qzKWD/" rel="nofollow noreferrer">http://jsfiddle.net/saifrahu28/qzKWD/</a></p>
  
  <p>Here is the Code :</p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;button id="createDiv"&gt;Start&lt;/button&gt;
  &lt;div id="results"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    #createDiv, #results span { cursor: pointer; }
  #results div {
      background: #FFA;
      border: 1px solid;
     width:auto;
  }
  #results input[type=text] {
      border: none;
      display: none;
      outline: none;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>    //  Call for document .onload event
  $(function() {
      //  Normal Click event asignement, same as $("#createDiv").click(function
      $("#createDiv").on("click", function(e) {
          //  Simply creating the elements one by one to remove confusion
          var newDiv = $("&lt;div /&gt;", { class: "new-folder" }),  //  Notice, each child variable is appended to parent
              newInp = $("&lt;input /&gt;", { name: "inpTitle[]",style:"display:block ;border:solid 1px #fa9a34", type: "text", value: "Unnamed Group", class: "title-inp" }).appendTo(newDiv),
              newSpan = $("&lt;span /&gt;", { id: "myInstance2",style:"display:none", text: "Unnamed Group", class: "title-span" }).appendTo(newDiv);
          //  Everything created and seated, let's append this new div to it's parent
          $("#results").append(newDiv);
      });
  
      //  the following use the ".delegate" side of .on
      //  This means that ALL future created elements with the same classname, 
      //    inside the same parent will have this same event function added
      $("#results").on("click", ".new-folder .title-span", function(e) {
          //  This hides our span as it was clicked on and shows our trick input, 
          //    also places focus on input
          $(this).hide().prev().show().focus();
      });
      $("#results").on("blur", ".new-folder .title-inp", function(e) {
          //  tells the browser, when user clicks away from input, hide input and show span
          //    also replaces text in span with new text in input
          $(this).hide().next().text($(this).val()).show();
      });
      //  The following sures we get the same functionality from blur on Enter key being pressed
      $("#results").on("keyup", ".new-folder .title-inp", function(e) {
          //  Here we grab the key code for the "Enter" key
          var eKey = e.which || e.keyCode;
          if (eKey == 13) { // if enter key was pressed then hide input, show span, replace text
              $(this).hide().next().text($(this).val()).show();
          }
      });
  })
  </code></pre>
  
  <p>WHAT it does now is , when I click the Start Button Create a input Box which Can be Rename and can save as text . BUT what I am wanting is .. WHEN I  click the Start button it will Create input With BLINKING cursor which is not here now . Now it become active when I clicked on it . But I am wanting it should Start blinking When it's Created . Is possible with any jquery or java scripts ? </p>