HTML 输入在 Safari 中不可拖动答案

【问题标题】：HTML Input not draggable in SafariHTML 输入在 Safari 中不可拖动
【发布时间】：2017-08-30 09:58:27
【问题描述】：

首先看到这个plunker

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div style="height:100px;width:100px; background-color:blue" draggable="true"></div>
    <input disabled draggable="true"/>
    <script>

    </script>
  </body>


</html>

在 Chrome 中，蓝色方块和文本输入都是可拖动的。但在 Safari 中，只有蓝色方块是可拖动的。输入字段不起作用。

Safari 有解决办法吗？我尝试用潜水包装输入并使 div 可拖动，但仍然无法正常工作。

【问题讨论】：

标签： javascript safari draggable html-input

【解决方案1】：

See this Forked Plunker for the functioning work around described below:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script>
      const selectInput = () => {
        let target = document.getElementById('input');
        target.className = "";
        target.focus();
      };

      const disableInput = () => {
        document.getElementById('input').className = "input-disabled";
      };
    </script>
    <style>
      .input-disabled {
        pointer-events: none;
      }
    </style>
  </head>

  <body>
    <h1>Hello Plunker!</h1>
    <div style="height:100px;width:100px; background-color:blue" draggable="true"></div>

    <div draggable="true" onmouseup="selectInput();">
      <input id="input" class='input-disabled' onblur="disableInput();" />
    </div>

  </body>      

</html>

步骤如下：

将输入包装在可拖动的 div 中
通过“pointer-events: none;”在输入端禁用鼠标事件CSS 属性
向选择输入的 div 添加 onmouseup 回调，删除“pointer-events: none;” CSS 属性，并分配输入焦点
向重新添加“pointer-events: none;”的输入添加 onblur 回调CSS 属性，这样一旦用户离开输入字段，div 就可以再次拖动

【讨论】：