我的目标是能够在给定的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
答案 0 :(得分:1)
单击时,只需删除click-Handler或检查是否已有输入,以便可以跳过代码。把它放在事件处理函数的顶部:
if($(this).find('input[type="text"]').length > 0){
return;
}
答案 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.
});