首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >我如何在iPhone的HTML文本输入框中放置一个清晰的按钮?

我如何在iPhone的HTML文本输入框中放置一个清晰的按钮?
EN

Stack Overflow用户
提问于 2018-04-02 05:39:02
回答 2查看 0关注 0票数 0

我想要一个漂亮的小图标,点击后会清除<INPUT>框中的文字。

这是为了节省空间,而不是在输入框外部有明确的链接。

我的CSS很差,.这是iPhone外观的截图

EN

回答 2

Stack Overflow用户

发布于 2018-04-02 14:30:52

只能使用JavaScript来使该按钮工作。这是一个SSCCE,你可以尝试一下:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('input.deletable').wrap('<span class="deleteicon" />').after($('<span/>').click(function() {
                    $(this).prev('input').val('').trigger('change').focus();
                }));
            });
        </script>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <input type="text" class="deletable">
    </body>
</html>

jQuery是没有必要的,它很好地将渐进增强所需的逻辑与源代码分开,当然也可以继续使用 HTML / CSS / JS:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 2803532, with "plain" HTML/CSS/JS</title>
        <style>
            span.deleteicon {
                position: relative;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4') 0 -690px;
                cursor: pointer;
            }
            span.deleteicon input {
                padding-right: 16px;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
        <span class="deleteicon">
            <input type="text">
            <span onclick="var input = this.previousSibling; input.value = ''; input.focus();"></span>
        </span>
    </body>
</html>

只能得到丑的HTML(和非交叉浏览器兼容的JS;))。

请注意,当用户界面的使用感受不是最关心的,但功能是,然后才是使用,<input type="search">而不是<input type="text">。它会在支持HTML5的浏览器上显示(浏览器特定的)清除按钮。

票数 0
EN

Stack Overflow用户

发布于 2018-04-02 15:32:24

现在使用HTML5,这非常简单:

代码语言:javascript
复制
<input type="search" placeholder="Search..."/>

大多数现代浏览器默认会自动在字段中显示可用的清除按钮。

纯HTML5搜索输入字段
纯HTML5搜索输入字段

(如果使用Bootstrap,必须在css文件中添加一个覆盖来显示它)

代码语言:javascript
复制
input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

引导程序搜索输入字段
引导程序搜索输入字段

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

代码语言:javascript
复制
input[type=search] {
    -webkit-appearance: none;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100007910

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档