html 輸入框顯示“小叉叉”的清空圖示

輸入框擷取焦點時動态顯示“叉叉”的清空圖表：在輸入框中輸入内容時，右邊顯示“叉叉”按鈕；輸入框為空的時候，“叉叉”按鈕消失。

主要難點是在擷取焦點的同時擷取輸入内容：方法 1 和 2 是 google 到的，但相容性不夠；方法 3 是自己用 js 實作。

1. H5 type="search" 類型：

<input id="search" name="search" type="search"/> H5 input 标簽的一個類型；不支援 H5 就 JJ 了。

2. css 實作：

<style type="text/css"> 
        .input { padding: 5px; margin: 0; border: 1px solid #beceeb; }
        .clear { display: none; position: absolute; width: 16px; height: 16px; margin: 6px 0 0 -20px; background: url(a.png) no-repeat; outline: none; }
        .input::-ms-clear { display: none; }
        .input:valid + .clear { display: inline; }
</style>
<input class="input" id="box_bak" required /><a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="clear" οnclick="cssClear();" />
<script type="text/javascript">        
function cssClear() {
        alert("cssClear");
}
</script>
           

3. js 實作：

之前說了，在輸入框擷取焦點輸入的時候，是擷取不到輸入值的。幾近放棄的時候，驚喜發現，miniUI 提供了getInputText()、hsetInputText() 兩個方法，就是解決在擷取焦點時候不能擷取輸入值得問題。現在問題得以解決。

<style type="text/css">
.clear {display: none;position: absolute;width: 16px;height: 16px;margin: 4px 0 0 -22px;background:url(/dqy/swsj/images/fzz/clear.png) no-repeat;outline: none;}
</style>
<input class="input" id="box_bak" required /><a href="javascript:;" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="clear">
<script type="text/javascript">
if(mini.get("inputId").getInputText() != "") {
            $("#clear").show();
} else {
            $("#clear").hide();
}
</script>
           

附：貌似一些 UI 架構和 js 庫也會提供 getInputText() 的方法，比如 Angular。原生 js 的話，暫且實在無能為力，難道要在事件中自己拼接字元串？