javascript - 允许用户在js创建的文本区域内进行选择

Question

我有一个名为“What”的 div。 如果用户单击它，它就会从文本更改为文本区域输入。

$('.What').click(function() {
    $(this).empty().html('<textarea name="X">' + $(this).text() + '</textarea>');
    $(this).find('textarea').select();
});

您可以看到我还选择了新创建的文本区域。
如果用户单击文本区域，则不会发生任何事情。

问:如何允许用户单击新创建的文本区域字段以将光标定位在他们想要的位置？我怀疑这与使用现场事件来防止冒泡有关。

Answer 1

问题是，当您用文本区域替换 div 的内容后，您的点击处理程序不会消失。因此，每次单击文本区域都会冒出“What”-div 并再次触发事件处理程序，从而重新附加文本区域。

您必须确保单击文本区域不会触发您的处理程序。执行此操作的一个简单方法是 jquery 的 one 函数，该函数在调用一次事件处理程序后会解除绑定(bind)。

另一个问题是在清空 div 后获取其内容，因此 textarea 的默认值将始终为空字符串。这可以通过首先获取内容来解决。更正后的代码现在如下所示

$('.What').one('click',function() {
   var content = $(this).text();
   $(this).empty().html('<textarea name="X">' + content  + '</textarea>');
   $(this).find('textarea').focus();
});

请参阅此处的示例:http://jsfiddle.net/xszUS/