實現輸入框自帶清除按鈕

2021-10-08 17:36:20 字數 341 閱讀 6771

最近,專案中需要,在輸入框獲取焦點是動態顯示「×」圖示。即在輸入框中輸入內容時,右邊顯示「×」按鈕;輸入框為空時,「×」按鈕消失。難點在於獲取焦點的同時,獲取輸入內容。

注意:本例子的樣式基於bootstrap.css和jquery,不再單獨新增樣式。

將button和input框放入同乙個div中,清除按鈕可以使用或fonts圖示,我使用的是bootstrap中button樣式,具體位置可自行微調;

×

注:button外的div樣式為input_clear樣式。

參考部落格 

實現輸入框自帶清除按鈕

輸入框自帶清除按鈕是很常見的需求了,網上有很多方案,最基礎的是原生實現input和清除按鈕,然後繫結一大堆事件,此種方案非常原始,而且復用性極差。稍微好點的方案有基於bootstrap和jquery的,將input和清除按鈕整合起來,但樣式依賴bootstrap,加重了檔案引入數,而且很容易有jqu...

輸入框 按鈕 下拉框

1 只有下劃線的文字框 2 軟體序列號式的輸入框 3 軟體序列號式的輸入框 完整版 4 輸入框景背景透明 5 滑鼠劃過輸入框,輸入框背景色變色 6 輸入字時輸入框邊框閃爍 邊框為小方型 7 輸入字時輸入框邊框閃爍 邊框為虛線 8 自動橫向廷伸的輸入框 9 自動向下廷伸的文字框 一 按鈕樣式 butt...

輸入框點選按鈕清除輸入的所有字元的封裝

清除輸入框裡的字元如果是一排edittext,新增乙個清除按鈕很容易,但是如果一堆呢,addtextchangedlistener則太煩了,畢竟裡面有三個方法需要處理,所以就有了一次關於清除按鈕的封裝。import android.content.context import android.tex...