Opera Mini 용 자리 표시 자 polyfill

Question

나는 프록시 브라우저이기 때문에 Opera Mini에서 괜찮게 작동하는 자리 표시 자 polyfill로 Placeholders.js을 사용하고 있습니다. 누구나 Opera Mini 용 자리 표시 자 polyfill을 보유하고 있습니까?

Answer 1

오페라 미니 supportsonfocus 및 onblur 이벤트. 따라서 focus 이벤트에 자리 표시자를 숨기고 blur 이벤트 (간단한 사례)에 표시기 처리기를 추가 할 수 있습니다.

iOS 오페라 미니 및 안드로이드 오페라 미니 (지난 버전)에 대한 필자의 시험은 this video (docs)과 같은 기기 키보드에서 done을 눌러야만 placeholder polyfill이 제대로 작동 함을 보여줍니다. 키보드 바깥을 탭하면 텍스트 입력에 초점이 없어지지만 흐림 처리기가 작동하지 않습니다. Opera Mini는 장치에서 실행되지 않기 때문에 이러한 동작은 사실입니다. 더 많은 정보 here.

내 test code 두 개의 텍스트 입력이있는 양식을 만들고 첫 번째 입력 핸들러에 속성을 추가합니다. 두 번째 입력의 경우 addEventListener을 사용하여 핸들러를 추가합니다.

HTML :

<form action=""> 
    <input type=text value="Аttributes handler" onfocus="(this.value === 'Аttributes handler') && (this.value = '')" onblur="(this.value === '') && (this.value = 'Аttributes handler')"> 
    <br><br> 
    <input type=text value="" data-placeholder="Listener handler"> 
    </form> 

자바 스크립트 :

document.addEventListener('DOMContentLoaded', function() { 
    var listenerInputNode = document.querySelector('input:last-child'), 
     placeholderText = listenerInputNode.getAttribute('data-placeholder'); 

    (listenerInputNode.value === '') && (listenerInputNode.value = placeholderText); 

    listenerInputNode.addEventListener('focus', function() { 
    (this.value === placeholderText) && (this.value = ''); 
    }, false); 
    listenerInputNode.addEventListener('blur', function() { 
    (this.value === '') && (this.value = placeholderText); 
    }, false); 

}); 

그래서 내가 오페라 미니의 자리에 대한 작업 polyfill 정말 있다고 생각하지만, 예상대로 focus/blur 이벤트 정말 실행되지 않습니다 .

Answer 2

Opera Mini를 감지하고 if 문을 사용하여 레이블을 숨기거나 표시하기 위해 일부 UA 스니핑을 사용하여이 문제를 해결할 수 있습니다. 누구든지 유용하다고 판단되면 코드를 게시 할 수 있습니다.