jQuery Mobile Textinput 小部件 clearBtn 选项

简介

clearBtn 是 jQuery Mobile Textinput 小部件的一个选项，用于添加一个清除输入框内容的按钮。

使用

clearBtn 选项默认是 false，表示输入框没有清除按钮。将该选项设置为 true 将会在输入框右侧添加一个清除按钮。可以通过以下代码实现：

<label for="input-with-clear-btn">Input with clear button:</label>
<input type="text" name="input-with-clear-btn" id="input-with-clear-btn" value="" data-clear-btn="true">

其中 data-clear-btn="true" 表示开启清除按钮功能。

自定义图标

可以使用 data-clear-btn-text 和 data-clear-btn-class 来自定义清除按钮的文本和样式。例如：

<label for="input-with-custom-clear-btn">Input with custom clear button:</label>
<input type="text" name="input-with-custom-clear-btn" id="input-with-custom-clear-btn" value="" data-clear-btn="true" data-clear-btn-text="清除" data-clear-btn-class="ui-btn-icon-notext ui-icon-delete">

其中：

• data-clear-btn-text="清除" 表示清除按钮文本为“清除”。
• data-clear-btn-class="ui-btn-icon-notext ui-icon-delete" 表示清除按钮样式为“无文本的删除图标”。

注意事项

• clearBtn 选项只适用于文本输入框（<input type="text">）和文本域（<textarea>）。
• clearBtn 选项要求 jQuery Mobile 版本在 1.4.0 以上。

参考文献

• jQuery Mobile Textinput Widget Docs
• jQuery Mobile Textinput Widget Docs - clearBtn Option