Click a button to open a input field with Blinking Cursor

Question

I have a Code that I got form my first post :Need help about a function

I modified this code and trying to work like how I want .But I got Stuck in one point .

JSfiddle LINK : http://jsfiddle.net/saifrahu28/qzKWD/

Here is the Code :

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();
        }
    });
})

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 ?

Another improvement would be to use `placeholder` instead of `value` for input (text). — Ionică Bizău, May 16 '13 at 14:57

score 2 · Accepted Answer · answered May 16 '13 at 14:45

2

You need to use the focus() event.

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

answered May 16 '13 at 14:45

epascarello

204,599
20
195
236

Thank you very much this is the Simplest Way :) – S Raihan May 16 '13 at 15:27

score 2 · Answer 2 · edited May 23 '17 at 11:55

2

You should use newInp.focus() to give the textbox focus, but you presumably also want the cursor at the end?

Use the following to achieve that:

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

Then do:

newInp.focus().setCursorToTextEnd();

Credit should go to Gavin G for the setCursorToTextEnd()

I've applied this to your fiddle - http://jsfiddle.net/qzKWD/3/

edited May 23 '17 at 11:55

Community

1
1

answered May 16 '13 at 14:54

Alex

8,875
2
27
44

problem with this is if added a couple of boxes and you delete the text of the box that is in between two boxes the box with deleted items shrinks a line size – Oct 19 '13 at 04:04

Ionică Bizău · Answer 3 · 2013-05-16T14:59:16.993

1

You need the focus() event.

A solution would be finding the input inside of newDiv element that is appended to #results, and then focusing on it.

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

Another solution is to focus directly on newInp element that is same <input>.

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

JSFIDDLE

edited May 16 '13 at 14:59

answered May 16 '13 at 14:51

Ionică Bizău

109,027
88
289
474

2nd one is Better One and I liked this one . Thank you Very much – S Raihan May 16 '13 at 15:31
Yes, and it's more efficient. – Ionică Bizău May 16 '13 at 15:36

Click a button to open a input field with Blinking Cursor

3 Answers3

Linked