輸入框獲取焦點(diǎn)時(shí)動(dòng)態(tài)顯示“叉叉”的清空?qǐng)D表：在輸入框中輸入內(nèi)容時(shí)，右邊顯示“叉叉”按鈕；輸入框?yàn)榭盏臅r(shí)候，“叉叉”按鈕消失。

主要難點(diǎn)是在獲取焦點(diǎn)的同時(shí)獲取輸入內(nèi)容：方法 1 和 2 是 google 到的，但兼容性不夠；方法 3 是自己用 js 實(shí)現(xiàn)。

1. H5 type="search" 類型：

H5 input 標(biāo)簽的一個(gè)類型；不支持 H5 就 JJ 了。

2. css 實(shí)現(xiàn)：

.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; }

function cssClear() {

alert("cssClear");

}

3. js 實(shí)現(xiàn)：

之前說(shuō)了，在輸入框獲取焦點(diǎn)輸入的時(shí)候，是獲取不到輸入值的。幾近放棄的時(shí)候，驚喜發(fā)現(xiàn)，miniUI 提供了getInputText()、hsetInputText()兩個(gè)方法，就是解決在獲取焦點(diǎn)時(shí)候不能獲取輸入值得問(wèn)題。現(xiàn)在問(wèn)題得以解決。

.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;}

if(mini.get("inputId").getInputText() != "") {

$("#clear").show();

} else {

$("#clear").hide();

}

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

總結(jié)

以上是生活随笔為你收集整理的html文本框中有一个叉号标志,html 输入框显示“小叉叉”的清空图标的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。