Javascript to dynamically add textbox , and again convert the text box to text

Question

I need something like a fill in the blanks sheet for children. When people click the ------ (dashes) it should turn into a textbox, and people can type it. after that when they move from that element after typing, it should turn into the text that they entered inside that text box.

I really dono how to approach this problem. I tried the following code, but what happens is, i am unable to type inside the text box. The cursor is not appearing at all

<html>
    <head>
        <title>NSP Automation</title>
        <script src ="jquery.min.js">
        </script>
    </head>
    <body>

        <div class="container">
            My Name is = <span id="name">__________<span>
        </div>
        <script>
            $(document).on('click', '#name', function(){
                document.getElementById("name").innerHTML = "<input type=\"text\">";
            });
        </script>
    </body>
</html>

any pointers on how to achieve this ?

Thanks,

use </span> to close the tag

user4227915
– user4227915

2015-01-12 16:38:59 +00:00
Commented Jan 12, 2015 at 16:38 — user4227915
– user4227915, Commented Jan 12, 2015 at 16:38

Andreas Gnyp · Accepted Answer · 2015-01-12 16:25:58Z

3

Since you've set the listener on the whole document, you will be recreating the input-tag with every click. Try something like:

$('#name').on('click', function(){
  this.innerHTML = "<input type=\"text\">";
  $('#name').off('click')
}

After clicking on the span-element, you remove the listener on it again, and you should be able to type.

http://jsfiddle.net/218rff9v/

answered Jan 12, 2015 at 16:25

Andreas Gnyp

1,9001 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guillermo · Accepted Answer · 2015-01-12 16:38:58Z

1

Here is an example that generates the wished behaviour for all spans in your container. Some details can be improved but I think it's working as expected.

function convertSpanToInput() {
    // Insert input after span
    $('<input id="tmp_input">').insertAfter($(this));
    $(this).hide(); // Hide span
    $(this).next().focus();
    $("#tmp_input").blur(function() {
        // Set input value as span content
        // when focus of input is lost.
        // Also delete the input.
        var value = $(this).val();
        $(this).prev().show();
        $(this).prev().html(value);
        $(this).remove();        
    });
}

$(function() {
    // Init all spans with a placeholder.
    $(".container span").html("__________");
    // Create click handler
    $(".container span").click(convertSpanToInput);
});

Here is an html example with which you can test it:

<div class="container">
    My Name is = <span></span>. I'm <span></span> years old.
</div>

JsFiddle: http://jsfiddle.net/4dyjaax9/

answered Jan 12, 2015 at 16:38

Guillermo

7896 silver badges15 bronze badges

2 Comments

Bala Over a year ago

Let me try this .. THanks. :)

Guillermo Over a year ago

No problem. You could improve it e.g. by adding a functionality to be able to change fields with the tab key.

atmd · Accepted Answer · 2015-01-12 16:22:40Z

1

I'd suggest you have input boxes and don't do any converting

Simply use CSS to remove the borders and add a dashed border bottom

input[type=text]{
    border:none;
    border-bottom:1px dashed #777;
} <!-- something like that -->

add a click handler to add a edited class, so you can remove the bottom border

input[type=text].edited{
    border:none;
}

That way you don't need to replace html elements, you just style them to look different

answered Jan 12, 2015 at 16:22

atmd

7,5003 gold badges35 silver badges64 bronze badges

Comments

Ivan Sivak · Accepted Answer · 2015-01-12 16:28:51Z

1

Why not use text input and only change CSS classes?

CSS:

.blurred{
    border-style: none none solid none;
    border-width: 0px 0px 1px 0px;
    border-bottom-color: #000000;
    padding: 0px;
}
.focused{
    border: 1px solid #999999;
    padding: 3px;
}

JavaScript:

$('#nameInput').focus(function(){
    $(this).removeClass('blurred').addClass('focused');
});
$('#nameInput').blur(function(){
    $(this).removeClass('focused').addClass('blurred');
});

HTML:

<div class="container">
    My Name is = <span id="name"> <input id="nameInput" type="text" class="blurred"></input> <span>
</div>

Check this jsfiddle:

http://jsfiddle.net/gwrfwmw0/

answered Jan 12, 2015 at 16:28

Ivan Sivak

7,5584 gold badges39 silver badges43 bronze badges

Comments

user4227915 · Accepted Answer · 2015-01-12 16:34:21Z

1

http://jsfiddle.net/we6epdaL/2/

$(document).on('click', '#name', function(e){
    if( $("#myText").is(e.target))
        return;
    $(this).html("<input type='text' id='myText' value='"+ $(this).html() +"'>");
});

$(document).on("blur", "#name", function(){
    $(this).html( $("#myText").val() );
});

answered Jan 12, 2015 at 16:34

user4227915

Collectives™ on Stack Overflow

Javascript to dynamically add textbox , and again convert the text box to text

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related