Фокусировка текста не работает при нажатии на сортируемый список

Я искал довольно много, так что прости меня, если это было покрыто где-то еще. Рассмотрим небольшую программу, которая демонстрирует проблему, которую я пытаюсь решить. Мне бы хотелось, чтобы событие.focusout() вызывалось, когда кто-то щелкает из поля textarea в сортируемом списке. Он запускается почти везде, кроме текстовой области, кроме списка. Какие-нибудь мысли?

    <!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>
Источник

2 ответа

Решение

Странное поведение jQuery-ui... Не могу объяснить.

Но если вас интересует обход, вы можете вызвать .blur() на mousedown на сортируемом элементе.

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

Смотрите здесь.

И, между прочим, вокруг ваших функций достаточно только одной готовой обертки.

Источник

Спасибо, Луис! Это работает. Следуя вашей логике, я также могу добавить строку в сортируемый блок:

    start: function() {if ($("#ta").is(":focus")) $("#ta").blur();}

... хотя это работает, только если выполняется фактическая сортировка.

Источник
Другие вопросы по тегам