點擊一個按鈕，打開一個輸入字段閃爍的光標

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/