Question

我希望有一个编辑按钮，在点击时会变成textarea。但是，当我单击按钮时，生成的textarea将不会保持键盘焦点，我无法编辑它。

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 code：

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


<button> edit </button>

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

注意：我也尝试在W3schools的'tryit'编辑器中运行此代码并产生相同的结果，因此我怀疑问题出在我的小提琴上。

Answer 1

试试这个：

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

或@Dan指出，使用replaceWith

问题是，您将文本字段放在按钮内（您可以在原始小提琴中看到按钮背景）。您想在按钮后放置字段，然后删除按钮。

Answer 2

您正在按钮内创建文本区域

你需要做＃

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

看这里

http://jsfiddle.net/SdJrX/

警告：这将取代按钮的所有内容：如果里面有儿童，他们将会丢失。

将按钮转换为textarea的问题

2 个答案: