輸入框自帶清除按鈕是很常見的需求了，網上有很多方案，最基礎的是原生實現input和清除按鈕，然後繫結一大堆事件，此種方案非常原始，而且復用性極差。稍微好點的方案有基於bootstrap和jquery的，將input和清除按鈕整合起來，但樣式依賴bootstrap，加重了檔案引入數，而且很容易有jquery版本不相容的問題。這裡提供乙個外掛程式，僅依賴jquery，我們實現的功能有：
1、以一種很簡單的方式提供清除按鈕的建立
2、可自定義清除按鈕樣式
3、支援一些常用功能，例如顯示，隱藏、顯示警告色等
4、為input提供簡單的校驗功能
1、建立清除按鈕
為input元素新增data-auto-clear-button屬性，這樣就會自動建立清除按鈕，如下所示：
data-auto-clear-buttonid=
"mobile"
type
="tel"
placeholder
="請輸入您註冊的手機號"
/>
或者data-auto-clear-button
="true"
id="mobile"
type
="tel"
placeholder
="請輸入您註冊的手機號"
/>
也可以在需要的時候，通過js建立：
$
('#mobile').
autoclearbuttoninput
('create'
);
外掛程式自帶乙個清除按鈕樣式，但是你也可以自己定義清除按鈕樣式。方法是通過setdefaut方法設定icon為自定義的清除按鈕樣式。
$.autoclearbuttoninput.
setdefault()
;
外掛程式提供了一些常用方法，如下所示：
1、建立清除按鈕$(
'#mobile').
autoclearbuttoninput
('create');
2、銷毀按鈕$(
'#mobile').
autoclearbuttoninput
('destroy');
3、顯示清除按鈕$(
'#mobile').
autoclearbuttoninput
('show');
4、隱藏清除按鈕$(
'#mobile').
autoclearbuttoninput
('hide');
5、顯示警告$(
'#mobile').
autoclearbuttoninput
('warn');
6、清除警告$(
'#mobile').
autoclearbuttoninput
('clearwarn');
7、設定校驗方法$(
'#mobile').
autoclearbuttoninput
('setvalidatefunction'
,function
(data));
8、校驗內容$(
'#mobile').
autoclearbuttoninput
('validte'
);
該外掛程式提供了兩個預設設定：
icon
enablevalidation
自定義關閉按鈕樣式類
是否啟用校驗功能
可以通過setdefault方法更改預設配置：
$.autoclearbuttoninput.
setdefault()
;
該外掛程式提供了簡單的校驗功能，預設是關閉的，啟用方法參考第4節內容。我們可以通過setvalidationfunction方法，自定義校驗邏輯，返回結果即可。
$
('#mobile').
autoclearbuttoninput
('setvalidatefunction'
,function
(data)
)
var isvalid =$(
'#mobile').
autoclearbuttoninput
("validate"
);
如果覺得好用，麻煩點個star，謝謝~
實現輸入框自帶清除按鈕
最近，專案中需要，在輸入框獲取焦點是動態顯示 圖示。即在輸入框中輸入內容時，右邊顯示 按鈕 輸入框為空時，按鈕消失。難點在於獲取焦點的同時，獲取輸入內容。注意 本例子的樣式基於bootstrap.css和jquery，不再單獨新增樣式。將button和input框放入同乙個div中，清除按鈕可以使用...
輸入框 按鈕 下拉框
1 只有下劃線的文字框 2 軟體序列號式的輸入框 3 軟體序列號式的輸入框 完整版 4 輸入框景背景透明 5 滑鼠劃過輸入框，輸入框背景色變色 6 輸入字時輸入框邊框閃爍 邊框為小方型 7 輸入字時輸入框邊框閃爍 邊框為虛線 8 自動橫向廷伸的輸入框 9 自動向下廷伸的文字框 一 按鈕樣式 butt...
輸入框點選按鈕清除輸入的所有字元的封裝
清除輸入框裡的字元如果是一排edittext，新增乙個清除按鈕很容易，但是如果一堆呢，addtextchangedlistener則太煩了，畢竟裡面有三個方法需要處理，所以就有了一次關於清除按鈕的封裝。import android.content.context import android.tex...