2013-05-06 64 views
0

我創建了一個文本字段組件,其中包含常規文本字段和旁邊的清除(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()事件處理程序清空場,消除了清除按鈕和然後再次聚焦文本字段。

問題

當點擊了清除按鈕,虛擬鍵盤簡要地消失在模糊和焦點之間。是否可以始終保持鍵盤可見?

順便說一句,我知道,當選擇的全部文本,然後取出清除按鈕不會消失,但我不是太擔心那種情況下:)

+0

如果您使用'touchstart'而不是'click',並且在輸入失去焦點之前取消事件會發生什麼? – 2013-05-06 04:06:25

+1

@DaggNabbit那麼,密封交易:)你想寫它作爲一個答案? – 2013-05-06 04:11:18

+0

當然,爲什麼不:) – 2013-05-06 04:12:33

回答

1

嘗試監聽touchstart,而不是click,它應該在輸入失去焦點之前觸發(並且它也會更響應一些)。