javascript - 我如何像 iPhone 一样在我的 HTML 文本输入框中放置一个清除按钮？

Question

我想要一个漂亮的小图标，点击它会清除 框中的文本。

这是为了节省空间而不是在输入框之外有一个清晰的链接。

我的 CSS 技能很弱...这是 iPhone 外观的屏幕截图照片。

Answer 1

如今使用 HTML5，这非常简单:

<input type="search" placeholder="Search..."/>

默认情况下，大多数现代浏览器会自动在字段中呈现可用的清除按钮。

(如果您使用 Bootstrap，则必须在您的 css 文件中添加覆盖以使其显示)

input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

Safari/WebKit 浏览器还可以在使用 type="search" 时提供额外的功能，例如 results=5 和 autosave="..."，但它们也会覆盖您的许多样式(例如高度、边框)。为了防止这些覆盖，同时仍然保留 X 按钮等功能，您可以将其添加到您的 css:

input[type=search] {
    -webkit-appearance: none;
}

参见 css-tricks.com for more info关于 type="search" 提供的功能。