Onsen UI，添加一个清晰的输入按钮

Question

我无法找到一种简单的方法来向Onsen UI中的输入字段添加clear（x）按钮。任何帮助都将特别适合输入类型搜索。

Answer 1

假设您正在使用带有DOM的直接JS，请使用：

<input id="txtSearch" value="Clear Me">
<ons-button onclick="document.getElementById('txtSearch').value='';">Clear</ons-button>

编辑：添加另一个向下和脏的解决方案，使用简单的CSS：

<input id="txtSearch" value="Clear Me">
<ons-icon icon="ion-close" size="20px" fixed-width="true" style="margin-left:-25px" onclick="document.getElementById('txtSearch').value='';"></ons-icon>

Answer 2

我发现类型搜索的输入，您需要使用 CSS 启用 x clear 按钮，因为它在 onsen-ui 样式中被禁用。要启用它，请将此行添加到您的 css

.search-input::-webkit-search-cancel-button { display: inline-block; }