jQuery可拖动使输入文本字段不可编辑(吞下onfocus?) [英] Jquery draggable makes input text fields uneditable (swallows onfocus?)
问题描述
我已经在下面编写了代码，能够将一个输入字段拖到另一个字段上，但是似乎可拖动的内容会吞下input[text].onfocus.
I have written code (below) to be able to drag an input field onto another, but it seems that draggable swallows input[text].onfocus.
这会导致出现问题，所有可拖动的输入字段都将用作禁用(firefox)，并且单击鼠标不会使它们聚焦.如果我使用TAB键专注于输入字段，则可以编辑输入字段，但是我必须遍历所有必需的Tab-indexs.
This results in the problem, that all draggable input fields act as disabled (firefox) and clicking the mouse does not focus them. I can edit the input field if I focus on them using the TAB key, but I have to traverse all the necessary tab-indexes.
因此，似乎可拖动吞下了input[text].onfocus鼠标事件.
So it seems draggable swallows the input[text].onfocus mouse event.
在绑定期间是否有解决方法?
Is there a way to workaround this during bind-time?
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready( function()
{
$("#drag-table tr td input").draggable({helper: 'clone', revert: 'invalid', cancel: null, cursor: 'move', addClasses: false, containment: $("#drag-table"), handle: 'h2', opacity: 0.8, scroll: true });
$("#drag-table tr td input").droppable({
addClasses: false,
drop: function(ev, ui) {
alert('value='+ ui.draggable.val() + ", text=" + ui.draggable.text() + " and deeper=" + ui.draggable[0].value);
$(this).insertAtCaret(ui.draggable.val());
ui.draggable.val(null);
$(this).trigger('change');
}
});
});
$.fn.insertAtCaret = function (myValue) {
return this.each(function(){
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
}
//MOZILLA / NETSCAPE support
else if (this.selectionStart || this.selectionStart == '0') {
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
</script>
</head>
<body>
<table border="1" cellspacing="10" cellpadding="10" id="drag-table">
<tr>
<td><input type="text" name="1x1y" id="id1x1y" value="text" onfocus="alert('onfocus swallowed?');"/></td>
<td><input type="text" name="2x1y" id="id2x1y" onchange="alert('hello');"/></td>
</tr>
<tr>
<td><input type="text" name="1x2y" id="id1x2y" value="next"/></td>
<td><input type="text" name="2x2y" id="id2x2y"/></td>
</tr>
</table>
</body>
推荐答案
将元素包装在div或span中(取决于哪一个有效)，然后在其上应用可拖动事件.
Wrap the element in either a div or span (depending on which would be valid) and apply the draggable event on that instead.
这篇关于jQuery可拖动使输入文本字段不可编辑(吞下onfocus?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
