Onsen UI，添加清除输入按钮答案

【问题标题】：Onsen UI, add a clear input buttonOnsen UI，添加清除输入按钮
【发布时间】：2016-02-01 03:33:44
【问题描述】：

我找不到在 Onsen UI 的输入字段中添加清除 (x) 按钮的简单方法。对于输入类型搜索，我们将不胜感激。

【问题讨论】：

【解决方案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>

【讨论】：

我希望有一个解决方案，将按钮放在输入中，而不是在它旁边/下面...
已编辑以添加您所寻求的内容。你可能需要稍微玩一下你的 CSS，但这是最快和最简单的方法，无需为它进行大量引导。

【解决方案2】：

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

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

【讨论】：