Question

我有一个名为“What”的div。如果用户点击它，它会从文本变为textarea输入。

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

你可以看到我也选择了新创建的文本区域如果用户点击textarea，则没有任何反应。

问：如何让用户点击新创建的textarea字段将光标定位到他们想要的位置？我怀疑这与使用现场活动防止冒泡有关。

Answer 1

问题是，在用textarea替换div的内容后，你的点击处理程序不会消失。所以每次点击textarea都会冒出“What”-div并再次触发你的事件处理程序，重新应用textarea。

您必须确保textarea上的点击不会触发您的处理程序。一个简单的方法是使用jquery的one - 函数，它在调用一次事件处理程序后将其解除绑定。

另一个问题是在您清空div后获取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/

Answer 2

使用：

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

简而言之，请使用.focus()而不是.select()

如果您想对用户点击/标记出名为blur的文本区域做出反应

Answer 3

试试这个

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

点击此处：http://jsfiddle.net/Hy5ZB/

允许用户在js创建后在textarea内选择

3 个答案: