이것은 버그입니까? 요소를 두드리면 다른 요소가 키보드 포커스를받을 수 있습니다.

모바일 사파리, Android 브라우저 및 Android 용 Firefox ("Fennec")에서 보이는 효과가 버그 또는 예상되는 동작인지 파악하려고합니다. 기본적으로 <input> 요소는 사용자가 원래 탭하지 않은 경우에도 특정 시나리오에서 <input> 요소가 키보드 포커스를받을 수 있다는 점입니다. 모바일 브라우저에서이것은 버그입니까? 요소를 두드리면 다른 요소가 키보드 포커스를받을 수 있습니다.

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="viewport" content="width=device-width, user-scalable=no"> 
<style> 
#screenCover { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0, 0, 0, 0.3); 
    z-index: 1; 
} 

#newItemInput { 
    position: absolute; 
    width: 200px; 
    height: 20px; 
} 
</style> 
</head> 
<body> 

<div id="screenCover"></div> 
<input id="newItemInput" type="text"> 

<script type="text/javascript" language="JavaScript"> 
var screenCoverEl = document.getElementById("screenCover"), 
    newItemInputEl = document.getElementById("newItemInput"); 

newItemInputEl.value = String(navigator.userAgent); 

screenCoverEl.addEventListener("touchend", function (event) { 
    // Move the <input> element in the way. 
    newItemInputEl.style.top = (event.changedTouches[0].clientY - 10) + "px"; 
    newItemInputEl.style.left = (event.changedTouches[0].clientX - 10) + "px"; 

    // Hide the screen cover. Note that the screen cover was the original target of the tap. 
    screenCoverEl.style.display = "none"; 
}, false); 

newItemInputEl.addEventListener("click", function (event) { 
    this.setSelectionRange(0, this.value.length); 
}, false); 
</script> 
</body> 
</html>

http://jsfiddle.net/f7TKc/2/

직접 : 여기서

가 재현 테스트 케이스 인이 예에서

http://fiddle.jshell.net/f7TKc/2/show/

, 스크린 커버 위에 놓여 문서,하지만 touchend에 화면 덮개가 숨겨져 <input> 요소가 이동되었습니다. 사용자가 스크린 커버를 두드린 곳까지 Mobile Safari, Android Browser 및 Fennec 13.0b1에서 <input> 요소는 키보드 포커스를 받아 들일 수 없습니다.

에뮬레이터 내에서 충돌하기 때문에 새 버전의 Fennec에서이를 테스트 할 수 없습니다.

이것은 버그입니까? 예상되는 동작입니까?

출처

2012-06-16 Daniel Trebbien

HTTP : //code.google.com/p/android/issues/detail? id = 6721? – Slartibartfast

예 나는 이것이 버그라고 생각이 여기에 같은 줄에있을 수 있습니다 http://code.google.com/p/android/issues/detail?id=6721하고 그래서, 다음 링크를 시도 할 수있는 다른 사람들이 밖으로 시도 몇 가지 해결 방법이있는 경우

출처

2012-10-24 17:23:51 Slartibartfast

이 문제는 [6721] (http://code.google.com/p/android/issues/detail?id=6721)과 다르지만 버그 보고서와 그에 상응하는 토론은 이것이 사실 참으로 버그라고 믿게 만듭니다. 링크 주셔서 감사합니다. –

예상되는 동작이라고 생각합니다.

모바일 웹 브라우저의 개발자는 소형 디스플레이에서 잘못 설계된 웹 페이지에 대한 특별한 조정을해야합니다.

웹 페이지의 크기가 제대로 조정되지 않으면 UI 요소를 다른 레이어로 쉽게 덮을 수 있습니다.

클릭 이벤트가 레이어를 통해 전파되도록 허용하면 UI 요소를 사용할 수 없게됩니다.

이 이론을 뒷받침하는 문서가 없습니다.

------ 편집 -------- 코드와 함께 놀아 후

, 내가 sceencover가 제거되고 있음을 깨닫고 입력이 touchstart "에서 터치 위치로 이동 ". 입력은 "touchend"에서 포커스를받습니다.

입력을 이동하기 전에 지연을 설정하여이를 확인할 수 있습니다. 입력을하기 전에 손가락을 떼면 초점이 맞지 않습니다. 입력을 이동할 때 화면을 계속 터치하면 초점이 맞춰집니다.

screenCoverEl.addEventListener("touchstart", function (event) { 

screenCoverEl.style.display = "none"; 
setTimeout(function() { 
     newItemInputEl.style.top = (event.touches[0].clientY - 10) + "px"; 
     newItemInputEl.style.left = (event.touches[0].clientX - 10) + "px"; 
    },250); 


}, false);

출처

2012-10-20 09:35:51

몇 가지 다른 방법으로이 문제가 발생한 실제 웹 페이지의 경우 ~ 300ms를 피하기 위해 Google의 [빠른 버튼 기술] (https://developers.google.com/mobile/articles/fast_buttons)을 사용하고 있습니다. touchend와 click 사이의 지연. 따라서 실제 웹 페이지는 사실 touchend 문서를 업데이트하고 있지만 테스트 케이스를 준비하는 데 실수를 범했습니다. 나는 그 질문을 갱신했다. 변경된 후에 'touchend'에 타임 아웃을 설정해도 문제가 해결되지 않는 것으로 보입니다. –

터치 이벤트는 터치 시작, 터치하고 클릭합니다. 터치 이벤트의 터치 시작이 사용자의 입력에서 발생했는지 알아야합니다. 객체 변수를 암시 적으로 선언 할 수 있으며 (자바 스크립트에서 허용됨) false로 초기화 할 수 있습니다. touchstart 이벤트에서 true로 설정하십시오. 그런 다음 touchend 및/또는 클릭 이벤트에서 값이 맞는지 확인하십시오. 다음 코드는 예상대로 작동합니다.

<script type="text/javascript" language="JavaScript"> 
    var screenCoverEl = document.getElementById("screenCover"), 
    newItemInputEl = document.getElementById("newItemInput"); 

newItemInputEl.value = String(navigator.userAgent); 


screenCoverEl.addEventListener("touchstart", function (event) { 
    // Move the <input> element in the way. 

    screenCoverEl.style.display = "none"; 

    newItemInputEl.style.top = (event.touches[0].clientY - 10) + "px"; 
    newItemInputEl.style.left = (event.touches[0].clientX - 10) + "px"; 

    // Hide the screen cover. Note that the screen cover was the original target of the tap. 

}, false); 

newItemInputEl.touchStartedHere = false; // remember if a touch event started on this input 
newItemInputEl.addEventListener("touchstart", function (event) { 

    this.touchStartedHere = true; //set true if did.. 

}, false); 
newItemInputEl.addEventListener("click", function (event) { 


    if(this.touchStartedHere){ // do what you want if touch started here 
     this.setSelectionRange(0, this.value.length); 
    }else{ // prevent from receiving focus if touch didn't start here. 
     this.blur(); 
    } 
    this.touchStartedHere = false; // reset to false to prepare for next touch event. 

}, false); 
</script>

출처

2012-10-23 00:09:10

이 아이디어를 수정하여 마지막 'touchstart' 이벤트를 전역에 저장했습니다. 'newItemInputEl'은'focus' 이벤트를받을 때마다 마지막'touchstart' 이벤트의 대상이 입력 요소인지를 검사합니다. 그렇지 않으면 blur()가 키보드 포커스를 포기하기 위해 호출됩니다. http://jsfiddle.net/f7TKc/3/이 접근 방식은 iOS 5.0, 5.1 및 6.0에서 작동하지만 iOS 4.3.2에서는 작동하지 않았습니다. iOS 4.3.2 모바일 사파리가 터치 이벤트를 입력 요소에 전달하지 않는다는 것이 드러났습니다. http://jsfiddle.net/3zjQW/1/ 그래서 '클릭'캡처 리스너를 추가하여 전역을 재설정했습니다. http : http : //jsfiddle.net/f7TKc/4/ –

이것은 버그입니까? 요소를 두드리면 다른 요소가 키보드 포커스를받을 수 있습니다.

답변

관련 문제