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

时间:2014-09-15 12:14:19

标签: javascript jquery html5 dom

我的目标是能够在给定的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

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:1)

另外在输入上使用.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.
});