我无法输入输入

我有一个可排序的列表。我正在使用小部件，鼠标，位置，可排序插件的jQuery UI。我无法输入输入

CSS：

#sortable{ 
    width : 550px; 
    display: inline-block; 
} 
#sortable li, #add { 
    width : 550px; 
    margin : 5px; 
    padding : 5px; 
    height : 50px; 
} 
#sortable li img.social-icon, #sortable li img.drag-cursor { 
    width: 40px; 
    height : 40px; 
    float : left; 
} 
#sortable li img.social-icon { 
    margin-right : 5px; 
} 
#sortable li img.drag-cursor { 
    margin-left : 5px; 
    cursor : move; 
} 
#sortable li input { 
    height:40px; 
    width:450px; 
    line-height: 45px; 
    float:left; 
} 
#add { 
    cursor : pointer; 
    text-align: center; 
    line-height: 45px; 
} 
.ui-state-highlight { height: 50px; line-height: 50px; }

HTML：

<div id="dash-wrapper"> 
    <ul id="sortable"> 
     <li class="ui-state-default"> 
      <img src="images/social/twitter.png" class="social-icon" /> 
      <input type="text" value="textt" name="user-media-link[]" class="user-media-link"> 
      <input type="hidden" name="social-media-type" value="1"> 
      <img src="images/drag.png" class="drag-cursor"> 
     </li> 
     <li class="ui-state-default"> 
      <img src="images/social/facebook.png" class="social-icon" /> 
      <input type="text" value="textt" name="user-media-link[]"> 
      <input type="hidden" name="social-media-type" value="1"> 
      <img src="images/drag.png" class="drag-cursor"> 
     </li> 
     <li class="ui-state-default"> 
      <img src="images/social/rss.png" class="social-icon" /> 
      <input type="text" value="textt" name="user-media-link[]"> 
      <input type="hidden" name="social-media-type" value="1"> 
      <img src="images/drag.png" class="drag-cursor"> 
     </li> 
    </ul> 
    <div class="ui-state-default" onCLick="addNewSocial(); return false;" id="add">ADD</div> 
</div>

脚本：

$(function() { 
    $("#sortable").sortable({ 
     placeholder: "ui-state-highlight" 
    }); 
    $("#sortable").disableSelection(); 
}); 

function addNewSocial() { 
    $("#sortable").append('<li class="ui-state-default"><img src="" width="100" height="100" /> <input type="text" value="textt" name="user-media-link[]"><input type="hidden" name="social-media-type" value="1"></li>'); 
}

它的工作非常好，但我不能键入什么投入。我只能通过TAB按钮与他们联系。当我点击它们时，没有任何反应。你可以看到一个live example。

我读过所有与这个问题有关的问题，但我找不到正确的答案。

W3 Validation is OK 
There isn't any error on Firebug 
Operation System : Ubuntu 11.04 
Browser : Firefox

来源

2011-05-21 Eray

发生这种情况是因为您有$("#sortable").disableSelection();。删除它，并会正常工作。

http://jsfiddle.net/KbBnu/1/

来源

2011-05-21 16:34:00 Sotiris

我找不到解决方案中的线程，但有人在使用'disableSelection（）'时遇到同样的问题。解决方法是，如果将'mousedown'事件绑定到输入并像这样调用'stopPropagation（）'：'$（'input [type =“text”]'）。mousedown（function（e）{e.stopPropagation （）;}）;'这样你也保留'disableSelection（）'的好处。 – DarthJDG 2011-05-21 18:15:20

disableSelection（）在UI 1.9中已被弃用，谢天谢地。 – iGanja 2013-05-30 22:03:20

@DarthJDG，你摇滚......对我来说，删除'disableSelection（）'根本就不是解决方案。但你的解决方案真的很有魅力。非常感谢你！！ – 2015-10-07 10:34:29

如果想防止文本选择，但继续在同一时间使用的输入，你应该试试这个

$('body *').not(':has(input)').not('input').disableSelection();

来源

2011-11-26 20:15:03 adyusuf

只要做到：

$("#sortable_container_id input").click(function() { $(this).focus(); });

和替换sortable_container_id与元素的id是所有“可排序”元素的容器。

来源

2014-10-28 20:55:07

我无法输入输入

回答

相关问题