输入文本框不能用 jQuery Draggable 编辑？答案

【问题标题】：Input text box not editable with jQuery Draggable?输入文本框不能用 jQuery Draggable 编辑？
【发布时间】：2011-04-21 00:08:17
【问题描述】：

我调用了一个 javascript 函数，该函数使用文本输入框动态构建 <li> 并在其中下拉。下拉列表与 jQuery 的 Draggable 一起工作正常，但我无法编辑输入文本框？

function addField(type){
  var html = '';
  html += '<li class="ui-state-default">';
  if(type == 'text'){
   html += '<b>Text Field</b><br />';
   html += 'Field Name: <input type="text" name="text" id="text">&nbsp;&nbsp;&nbsp;';
   html += 'Field Size: <select name="textSize" id="textSize' + fRank + '"><option value="small">Small</option><option selected value="medium">Medium</option><option value="large">Large</option><option value="large2">Large 2 Lines</option><option value="large3">Large 3 Lines</option><option value="large4">Large 4 Lines</option></select>';
  }
  html += '</li>';
  $("#sortableFields").append(html);

  $(function() {
       $( "#sortableFields" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
           connectToSortable: "#sortableFields",
    helper: "clone",
    revert: "invalid",
    cancel: ':input,option'
    });
    $( "ul, li" ).disableSelection();  
             });
}

我尝试过取消选项，但没有帮助。

你有什么建议？

【问题讨论】：

你用的是什么浏览器？它在 Chrome + Firefox 中对我来说很好用。这可能是您的 css 中某处的 z-index 问题，您有一个不可见的 div 延伸到输入框并阻止您单击它。编辑：啊，我看到你不能在输入框中选择文本，或者让胡萝卜去任何地方，但最后一个字母 - 我想这就是你的问题的意思。
删除 disableSelection() 行可以解决问题，并且一切正常（在 FF 和 Chrome 中）。否则，您可能会选择 Pointy 的答案。

标签： javascript jquery html jquery-ui

【解决方案1】：

我认为问题在于您将.disableSelection() 用于<li> 元素。不要这样做，而是将文本（<input> 之外的内容）放入 <span> 元素中，然后禁用跨度

$('li > span').disableSelection();

【讨论】：

【解决方案2】：

试试这个：

$('li.ui-state-default').on( 'click', 'input', function () {    
    $(this).focus();
});

它对我有用。

【讨论】：

即使对我来说 disableSelection() 也不起作用，但聚焦输入就像一个魅力！
一个更实际的解决方案可能是使用可排序小部件的 cancel 设置，就像询问用户已经做过的那样，也许他以错误的方式做到了（我没有研究了他的问题和代码）...（？）
@Redips77 我也在我的选项中使用取消，但从来没有工作过。当点击时强制关注输入是我的解决方案。 +1
但是，最好写$(document).on( 'click', 'li.ui-state-default input', function() { ... } ); 来支持动态添加的输入

【解决方案3】：

这对我有好处：

$('input').bind('click.sortable mousedown.sortable',function(ev){ ev.target.focus(); });

original answer

【讨论】：