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 나는 전체 텍스트를 선택하고 제거 할 때 클리어 버튼이 사라지지 않는다는 것을 알고 있어요,하지만 난 그 시나리오 :
'click' 대신'touchstart'를 사용하고 입력이 포커스를 잃기 전에 이벤트를 취소하면 어떻게됩니까? –
@DaggNabbit 글쎄, 그 거래를 봉인 :) 대답으로 작성하고 싶니? –
그래, 왜 안돼 :) –