HTML5 Перетащите не работает с Chrome, если на странице есть элемент ввода пароля - PullRequest
Новая
       5

HTML5 Перетащите не работает с Chrome, если на странице есть элемент ввода пароля

0 голосов
/ 25 августа 2018

В следующем примере элемент ввода пароля предотвращает любую операцию перетаскивания с Chrome, если элемент пароля находится перед перетаскиванием. Текст «My div text» нельзя перетаскивать в прямоугольник ни повторными попытками, поэтому Chrome блокирует перетаскивание для пользователя. Нажатие вручную на не перетаскиваемой области до перетаскивания устраняет проблему, но пользователь не будет знать, как это сделать. В Firefox это всегда нормально, несмотря ни на что. Различные js-попытки имитировать щелчок мышью в не перетаскиваемой области до перетаскивания. 

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>

<div id="divText" draggable="true" ondragstart="drag(event)"><h2>My div text</h2></div><br>

<p><input id="inputBox" type="password" /></p>

<script>document.getElementById("inputBox").focus()</script>

</body>
</html>
...