HTML 입력 드래그하지 사파리

에

첫 번째는 파란색 사각형과 텍스트 입력이 모두 드래그 할 수 있으며, 크롬에서이 plunker HTML 입력 드래그하지 사파리

<!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>

를 참조하십시오. 그러나 Safari에서는 파란색 사각형 만 드래그 가능합니다. 입력 필드가 작동하지 않습니다.

Safari에 대한 해결 방법이 있습니까? 나는 입력을 다이빙으로 랩핑 (wrapping)하고 div를 드래그 가능하게 만들고 여전히 작동하지 않는다.

출처

2017-04-05 Rob

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>

단계는 다음과 같습니다

랩
안 마우스 이벤트 비아 입력에 드래그 사업부의 입력 "포인터 이벤트 : 없음;" CSS 속성
입력을 선택하는 div에 onmouseup 콜백을 추가하고 "pointer-events : none;" CSS 속성을 지정하고 입력 포커스를 할당합니다.
"pointer-events : none;"을 다시 추가하는 입력에 onblur 콜백을 추가합니다. 사용자가 입력 필드를 떠날 때 div가 다시 드래그 될 수 있도록 CSS 속성.

출처

2017-08-18 02:11:09 JustinKizer

HTML 입력 드래그하지 사파리

답변

관련 문제