jquery - 单击可排序列表时,文本区域焦点不起作用

标签 jquery textarea jquery-ui-sortable focusout

我已经进行了相当广泛的搜索,所以如果其他地方已经介绍过这个问题,请原谅我。考虑这个小程序,它演示了我正在尝试解决的问题。我希望当用户从文本区域框中单击到可排序列表时触发 .focusout() 事件。除了列表之外,它几乎在文本区域之外的任何地方都会触发。有什么想法吗?

    <!DOCTYPE HTML>
    <html>
    <head>
    <style>
    textarea {
      width:90px;
      height:90px;
    }

    #la {
      width:90px;
      height:90px;
      border:1px solid black;
    }

    ul {
      margin:0;
      list-style-type: none;
    }

    li {
      border:1px solid black;
    }
    </style>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script>
    $( document ).ready(function() {
      $("#la ul").sortable();
    });

    $( document ).ready(function() {
      $("#ta").focusout(function(){
        alert("out");
      });
    });

    </script>
    </head>

    <body>
    <div id="la">
    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>  
    </div><br>
    <div id="cont">
    <textarea id="ta">123456</textarea>
    </div>
    </body></html>

最佳答案

这是 jQuery-ui 的奇怪行为......无法解释。

但是,如果您对漫游感兴趣,则可以在可排序元素上的 mousedown 上触发 .blur()

$(".ui-sortable-handle").on("mousedown", function(){
  if( $("#ta").is(":focus") ){ 
    $("#ta").blur();
  }
});

参见here .

顺便说一句,只需一个现成的包装器就足以满足您的功能。

关于jquery - 单击可排序列表时,文本区域焦点不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45450617/

相关文章:

javascript - 奇怪的 HTML/JS/CSS 滚动条功能难题

javascript - HTML &lt;textarea&gt; 的最大长度

jQueryUI Sortable - 使两个 Sortable 同时移动

javascript - 无法达到高度 :100% when using jQuery Mobile

javascript - 如何防止jQuery中的点击事件?

javascript - 将元素滑出屏幕 -- 等待 --- 滑回原位

javascript - 如何正确获取文本区域内容?

javascript - 通过JS使用RGB输入框上色

javascript - Angular 日期排序自定义函数

jQuery 可对多个 tbody 进行排序