Question

首先看到这个plunker

import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import * as App from './neuralnet';

@Injectable()
export class NeuralNetService {

    private headers = new Headers({ 'Content-Type': 'application/json' });
    private editUrl = 'api/edit';  // URL to web api

    constructor(private http: Http) { }

    getNets(): Promise<App.NeuralNet[]> {
        return this.http.get(this.editUrl)
            .toPromise()
            .then(response => response.json().data as App.NeuralNet[])
            .catch(this.handleError);
    }
}}

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

Safari有解决方法吗？我尝试用潜水包装输入并使div可拖动但仍无效。

Answer 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中
通过＆＃34; pointer-events：none;＆＃34;禁用输入上的鼠标事件。 CSS属性
将onmouseup回调添加到选择输入的div，删除＆＃34; pointer-events：none;＆＃34; CSS属性，并指定输入焦点
在输入中添加一个onblur回调，重新添加＆＃34; pointer-events：none;＆＃34; CSS属性，一旦用户离开输入字段，div将再次可拖动

HTML输入在Safari中不可拖动

1 个答案: