0

我有一个从我的第一篇文章中获得的代码：需要有关功能的帮助

我修改了这段代码并试图按照我想要的方式工作。但我被卡在了一个点上。

JSfiddle 链接：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();
        }
    });
})

它现在所做的是，当我单击“开始”按钮时，创建一个可以重命名并可以保存为文本的输入框。但是我想要的是..当我单击“开始”按钮时，它将使用 BLINKING 光标创建输入，但现在不在这里。现在，当我单击它时，它变为活动状态。但我希望它在 Created 时开始闪烁。可以使用任何 jquery 或 java 脚本吗？

4

3 回答 3

2

你应该使用newInp.focus()给文本框焦点，但你大概也希望光标在最后？

使用以下方法来实现：

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

然后做：

newInp.focus().setCursorToTextEnd();

应该归功于Gavin GsetCursorToTextEnd()

我已将此应用于您的小提琴 - http://jsfiddle.net/qzKWD/3/

于 2013-05-16T14:54:12.730 回答
2

您需要使用该focus()事件。

$("#results").append(newDiv);
newInp.focus();
于 2013-05-16T14:45:56.787 回答
1

你需要这个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

于 2013-05-16T14:51:45.183 回答