CODEWITHSUNDEEP
javascriptjquery
Bala
Bala

Reputation: 381

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

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,

Upvotes: 2

Views: 812

Answers (5)

Guillermo
Guillermo

Reputation: 791

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/

Upvotes: 1

user4227915
user4227915

Reputation:

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

Upvotes: 1

Ivan Sivak
Ivan Sivak

Reputation: 7498

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/

Upvotes: 1

Andreas Gnyp
Andreas Gnyp

Reputation: 1840

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/

Upvotes: 3

atmd
atmd

Reputation: 7490

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

Upvotes: 1

Related Questions