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

javascript html css iphone

2022-08-30 02:18:03

我想要一个漂亮的小图标，单击该图标时将清除<INPUT>框中的文本。

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

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

答案 1

如今，使用HTML5，它非常简单：

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

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

（如果您使用Bootstrap，则必须向css文件添加覆盖才能使其显示）

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

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

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

有关提供的功能的详细信息，请参阅 css-tricks.com。type="search"

答案 2

从HTML5开始，您可以使用.但这不一定是可定制的。如果你想完全控制 UI，这里有两个启动示例。一个带有jQuery，另一个没有。<input type="search">

使用jQuery：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="https://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon"></span>').after($('<span>x</span>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
                display: inline-flex;
                align-items: center;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                right: 3px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                color: #fff;
                background-color: #ccc;
                font: 13px monospace;
                text-align: center;
                line-height: 1em;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 18px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

没有jQuery

jQuery并不是绝对必要的，它只是很好地将渐进式增强所需的逻辑与源代码分开，当然你也可以继续使用普通的HTML / CSS / JS：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532, with "plain" HTML/CSS/JS</title>
        <style>
            span.deleteicon {
                position: relative;
                display: inline-flex;
                align-items: center;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                right: 3px;
                width: 15px;
                height: 15px;
                border-radius: 50%;
                color: #fff;
                background-color: #ccc;
                font: 13px monospace;
                text-align: center;
                line-height: 1em;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 18px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousElementSibling; input.value = ''; input.focus();">x</span>
        </span>
    </body>
</html>

你最终只会得到更丑陋的HTML（以及非交叉浏览器兼容的JS;)）。

同样，如果UI外观不是您最关心的问题，但功能是，那么只需使用而不是.它将在支持 HTML5 的浏览器上显示（特定于浏览器的）清除按钮。<input type="search"><input type="text">