Question

我的目标是能够在给定的div元素内动态键入文本（可以调整大小并移动），因此我创建了一个附加在我单击的文本框。

$('div').click(function(e){

    var top = e.clientY+'px';
    var left = e.clientX+'px';
    $('div').append('<input type="text">');
    $('input[type="text"]').css({'position' : 'absolute','top' : top,'left' : left});


});

问题在于，当我打算输入文字时，它不会让我和它创建一个新的文本框。

这是问题的fiddle to demo。

关于我想做什么，有什么干净的方法吗？非常感谢任何建议。 TIA

Answer 1

单击时，只需删除click-Handler或检查是否已有输入，以便可以跳过代码。把它放在事件处理函数的顶部：

if($(this).find('input[type="text"]').length > 0){
   return;
}

这是小提琴：http://jsfiddle.net/p2ct8eL7/2/

Answer 2

另外在输入上使用.focus()。

演示：http://jsfiddle.net/p2ct8eL7/4/

JS：

$('div').click(function (e) {
    var top = e.clientY - 20 + 'px';
    var left = e.clientX - 20 + 'px';
    var i = $('<input type="text">'); //Store the input in a variable.
    $('div').append(i);
    i.css({
        'position': 'absolute',
        'top': top,
        'left': left
    }).focus(); // modify the current input instead of all.
});

使用jQuery在div中动态键入文本

2 个答案: