javascript - 将按钮变成文本区域的问题

Question

我想要一个编辑按钮，单击时会变成文本区域。但是，当我单击该按钮时，生成的文本区域将不会保持键盘焦点，并且我无法编辑它。

Javascript代码:

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 代码:

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


<button> edit </button>

此外，代码是用 JFiddle 创建的，所以如果有人感兴趣的话，这里是 fiddle : http://jsfiddle.net/wasingej/TT5nw/17/

注意:我还尝试在 W3schools 'tryit' 编辑器中运行此代码，它产生了相同的结果，所以我怀疑问题出在我的 Fiddle 上。

Answer 1

试试这个:

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

或者正如@Dan指出的那样，使用replaceWith

问题是，您将文本字段放在按钮内(您可以在原始 fiddle 中看到按钮-y 背景)。您希望将字段放在按钮之后，然后删除按钮。