2013-05-06 2 views
0

일반 텍스트 필드와 그 옆에있는 clear (x) 버튼으로 구성된 텍스트 필드 구성 요소를 만들었습니다.앵커 클릭시 가상 키보드가 잠시 사라진다

<div class="input-clear"> 
    <input type="email" name="user" placeholder="Email address" /> 
    <a href="#">clear</a> 
</div> 

이 내가 그것을 초기화 사용하고 코드입니다 :

는 마크 업이며,

[].forEach.call(document.getElementsByClassName('input-clear'), function(el) { 
    var input = el.getElementsByTagName('input')[0], 
    a = el.getElementsByTagName('a')[0], 
    updateField = function() { 
     if (input.value.length) { 
      a.style.display = 'inline'; 
     } else { 
      a.style.display = 'none'; 
     } 
    }, 
    clearField = function(event) { 
     event.preventDefault(); 
     input.value = ''; 
     input.focus(); 
     updateField(); 
    }; 

    if (input && a) { 
     input.addEventListener('keyup', updateField, false); 
     input.addEventListener('change', updateField, false); 

     a.addEventListener('click', clearField, false); 

     updateField(); 
    } 
}); 

clearField() 이벤트 핸들러가 필드를 비워가 명확한 버튼을 제거하고 그런 다음 텍스트 필드를 다시 초점을 맞 춥니 다.

문제 맑은 버튼을 클릭

는 가상 키보드는 간단히 흐림과 초점 사이에 사라집니다. 키보드를 항상 보이게 할 수 있습니까?

는, BTW 나는 전체 텍스트를 선택하고 제거 할 때 클리어 버튼이 사라지지 않는다는 것을 알고 있어요,하지만 난 그 시나리오 :

+0

'click' 대신'touchstart'를 사용하고 입력이 포커스를 잃기 전에 이벤트를 취소하면 어떻게됩니까? –

+1

@DaggNabbit 글쎄, 그 거래를 봉인 :) 대답으로 작성하고 싶니? –

+0

그래, 왜 안돼 :) –

답변

1

에 대해 너무 걱정하지 않아요 touchstart 대기를 시도하는 대신 click 인 경우 입력이 포커스를 잃기 전에 실행되어야합니다 (너무 반응이 좋을 것입니다).