点击一个按钮，打开一个输入字段闪烁的光标

Question

我有，我得到了形成我的第一篇守则：Need help about a function

我修改这个代码，并试图像我多么希望。但我得到了一个必须坚持的工作点。

的jsfiddle LINK：http://jsfiddle.net/saifrahu28/qzKWD/

这里是代码：

HTML

<button id="createDiv">Start</button> 
<div id="results"></div> 

CSS

#createDiv, #results span { cursor: pointer; } 
#results div { 
    background: #FFA; 
    border: 1px solid; 
    width:auto; 
} 
#results input[type=text] { 
    border: none; 
    display: none; 
    outline: none; 
} 

JS

// 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 = $("<div />", { class: "new-folder" }), // Notice, each child variable is appended to parent 
      newInp = $("<input />", { name: "inpTitle[]",style:"display:block ;border:solid 1px #fa9a34", type: "text", value: "Unnamed Group", class: "title-inp" }).appendTo(newDiv), 
      newSpan = $("<span />", { 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(); 
     } 
    }); 
}) 

它做什么现在的问题是，当我点击开始按钮，创建一个输入框可以被重新命名，并可以保存为文本。但我想要的是..当我点击开始按钮，它会创建输入与闪烁光标，这是不是现在在这里。现在，当我点击它时，它就变得活跃起来。但我希望它应该在创建时开始闪烁。可以用任何jQuery或Java脚本？

Answer 1

您需要使用focus()事件。

$("#results").append(newDiv); 
newInp.focus(); 

Answer 2

您需要focus()事件。

解决方法是找到newDiv元素的内部输入，并将其附加到#results，然后重点关注该元素。

// Inside of click handler 
$("#results").append(newDiv); 
newDiv.find("input").focus(); 

另一个解决方案是直接关注newInp元件是相同<input>上。

// Inside of click handler 
$("#results").append(newDiv); 
newInp.focus(); 

JSFIDDLE

Answer 3

您应该使用newInp.focus()给文本框的焦点，但你大概也想将光标定位在结束了吗？

使用以下方法来实现这一目标：

$.fn.setCursorToTextEnd = function() { 
    $initialVal = this.val(); 
    this.val(''); 
    this.val($initialVal); 
}; 

然后做：

newInp.focus().setCursorToTextEnd();

信贷应该去Gavin G为setCursorToTextEnd()

我已经应用了您的提琴 - http://jsfiddle.net/qzKWD/3/