CODEWITHSUNDEEP
javascriptjqueryjsfiddle
user3361761
user3361761

Reputation: 259

Issue with turning a button into a textarea

I want to have an edit button which turns into a textarea when clicked. However, when I do click the button, the resulting textarea will not hold keyboard focus and I cannot edit it.

Javascript code:

var listEditHTML = "\
    <textarea name='edit_text'> Enter a date </textarea>\
";

$(document).ready(function()
{
    var App = { };
    App.default_text = 'Enter a date';

    $('button').click(function(){
        $(this).html(listEditHTML);
    });
});

HTML code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>


<button> edit </button>

Also the code was created with JFiddle so here's the fiddle if anyone's interested: http://jsfiddle.net/wasingej/TT5nw/17/

note: I also tried running this code in the W3schools 'tryit' editor and it produced the same results so I doubt that the issue is with my Fiddle.

Upvotes: 0

Views: 135

Answers (2)

Leo
Leo

Reputation: 293

You are creating a text area inside the button,

you need to do #

$(this).parent().html(listEditHTML);

look here

http://jsfiddle.net/SdJrX/

Warning: this will replace all the content of the button: if there were chidren inside it they will be lost.

Upvotes: 1

pennstatephil
pennstatephil

Reputation: 1643

try this:

$('button').click(function(){
        $(this).after(listEditHTML);
        $(this).remove();
});

or as @Dan pointed out, use replaceWith

The problem is, you're putting the text field inside the button (you can see the button-y background in your original fiddle). You want to put the field after the button, then remove the button.

Upvotes: 3

Related Questions