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

时间：2023-01-19 16:21:07

I want to have a nice little icon that, when clicked will clear the text in the <INPUT> box.

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

This is to save space rather than having a clear link outside of the input box.

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

My CSS skills are weak... Here is a screenshot photo of how the iPhone looks.

我的CSS技能很弱……这是iPhone的截图。

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

8 个解决方案

#1

83  

@thebluefox has summarized the most of all. You're only also forced to use JavaScript to make that button to work anyway. Here's an SSCCE, you can copy'n'paste'n'run it:

thebluefox总结的最多。无论如何，您也只能使用JavaScript使该按钮工作。这是一个SSCCE，你可以复制粘贴，运行它:

<!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/*/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>

Live example here.

生活例子。

jQuery is by the way not necessary, it just nicely separates the logic needed for progressive enhancement from the source, you can of course also go ahead with plain HTML/CSS/JS:

顺便说一句，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;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/*/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>

You only ends up with uglier HTML (and non-crossbrowser compatible JS ;) ).

最终，您只会得到更难看的HTML(以及非跨浏览器兼容的JS;)。

Note that when the UI look'n'feel isn't your biggest concern, but the functionality is, then just use <input type="search"> instead of <input type="text">. It'll show the (browser-specific) clear button on HTML5 capable browsers.

注意，当UI看起来并不是您最关心的问题时，但是功能是，然后使用而不是。它将在支持HTML5的浏览器上显示(特定于浏览器的)clear按钮。

#2

75  

Nowadays with HTML5, it's pretty simple:

现在HTML5非常简单:

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

Most modern browsers will automatically render a usable clear button in the field by default.

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

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

(If you use Bootstrap, you'll have to add an override to your css file to make it show)

(如果您使用Bootstrap，您必须向css文件添加一个覆盖以显示它)

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

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

Safari/WebKit browsers can also provide extra features when using type="search", like results=5 and autosave="...", but they also override many of your styles (e.g. height, borders) . To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:

Safari/WebKit浏览器在使用type="search"时也可以提供额外的功能，比如结果=5和autosave="……，但它们也会覆盖你的许多风格(例如身高、边框)。为了防止这些重写，在保留X按钮等功能的同时，您可以将其添加到您的css中:

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

See css-tricks.com for more info about the features provided by type="search".

有关type="search"提供的功能的更多信息，请参见css- info。

#3

33  

HTML5 introduces the 'search' input type that I believe does what you want.

HTML5引入了“搜索”输入类型，我相信这就是你想要的。

<input type="search" />

< input type = "搜索" / >

Here's a live example.

这是一个生活的例子。

#4

23  

Check out our jQuery-ClearSearch plugin. It's a configurable jQuery plugin - adapting it to your needs by styling the input field is straightforward. Just use it as follows:

查看我们的jQuery-ClearSearch插件。这是一个可配置的jQuery插件——通过样式化输入字段来适应您的需要是很简单的。使用方法如下:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

​ Example: http://jsfiddle.net/wldaunfr/FERw3/

例如:http://jsfiddle.net/wldaunfr/FERw3/

#5

15  

You can't actually put it inside the text box unfortunately, only make it look like its inside it, which unfortunately means some css is needed :P

不幸的是，你不能把它放入文本框中，只能让它看起来像它的内部，不幸的是，这意味着需要一些css:P

Theory is wrap the input in a div, take all the borders and backgrounds off the input, then style the div up to look like the box. Then, drop in your button after the input box in the code and the jobs a good'un.

理论是将输入包装在一个div中，将所有的边框和背景从输入中去掉，然后将div设置成与框相似的样式。然后，在输入框之后，在代码和作业中输入一个好的un。

Once you've got it to work anyway ;)

一旦你让它发挥作用;)

#6

1  

I got a creative solution I think you are looking for

我有一个创造性的解决方案，我想你正在寻找

$('#clear').click(function() {
  $('#input-outer input').val('');
});
body {
  font-family: "Tahoma";
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #e7e7e7 solid;
  border-radius: 20px;
}
#input-outer input {
  height: 2em;
  width: 80%;
  border: 0px;
  outline: none;
  margin: 0 0 0 10px;
  border-radius: 20px;
  color: #666;
}
#clear {
  position: relative;
  float: right;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  background: #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#clear:hover {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear">
    X
  </div>
</div>

https://jsfiddle.net/qdesign/xn9eogmx/1/

https://jsfiddle.net/qdesign/xn9eogmx/1/

#7

0  

@Mahmoud Ali Kaseem

@Mahmoud阿里Kaseem

I have just changed some CSS to make it look different and added focus();

我刚刚修改了一些CSS，使它看起来不同，并添加了focus();

https://jsfiddle.net/xn9eogmx/81/

https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
  $('#input-outer input').val('');
  $('#input-outer input').focus();
});
body {
  font-family: "Arial";
  font-size: 14px;
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #777 solid;
  position: relative;
  padding: 0px;
  border-radius: 4px;
}
#input-outer input {
  height: 100%;
  width: 100%;
  border: 0px;
  outline: none;
  margin: 0 0 0 0px;
  color: #666;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 35px;
  border-radius: 4px;
}
#clear {
  position: absolute;
  float: right;
  height: 2em;
  width: 2em;
  top: 0px;
  right: 0px;
  background: #aaa;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 4px 4px 0px;
}
#clear:after {
  content: "\274c";
  position: absolute;
  top: 4px;
  right: 7px;
}
#clear:hover,
#clear:focus {
  background: #888;
}
#clear:active {
  background: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear"></div>
</div>

#8

0  

Of course the best approach is to use the ever-more-supported <input type="search" />.

当然，最好的方法是使用更受支持的。

Anyway for a bit of coding fun I thought that it could be achieved also using the form's reset button, and this is the working result (it worths notings that cannot live other inputs but the search field with this approach, or the reset button will erase them too), no javascript needed:

反正一会儿编码的乐趣我认为它还可以实现使用表单的复位按钮,这是工作的结果(值得注意的是,不能其他输入,但这种方法的搜索框,或重置按钮将删除),不需要javascript:

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}
<form>
	<div>
		<input type="text" />
		<input type="reset" value="X" />
	</div>
</form>

#1

83  

@thebluefox has summarized the most of all. You're only also forced to use JavaScript to make that button to work anyway. Here's an SSCCE, you can copy'n'paste'n'run it:

thebluefox总结的最多。无论如何，您也只能使用JavaScript使该按钮工作。这是一个SSCCE，你可以复制粘贴，运行它:

<!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/*/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>

Live example here.

生活例子。

jQuery is by the way not necessary, it just nicely separates the logic needed for progressive enhancement from the source, you can of course also go ahead with plain HTML/CSS/JS:

顺便说一句，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;
            }
            span.deleteicon span {
                position: absolute;
                display: block;
                top: 5px;
                right: 0px;
                width: 16px;
                height: 16px;
                background: url('http://cdn.sstatic.net/*/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>

You only ends up with uglier HTML (and non-crossbrowser compatible JS ;) ).

最终，您只会得到更难看的HTML(以及非跨浏览器兼容的JS;)。

Note that when the UI look'n'feel isn't your biggest concern, but the functionality is, then just use <input type="search"> instead of <input type="text">. It'll show the (browser-specific) clear button on HTML5 capable browsers.

注意，当UI看起来并不是您最关心的问题时，但是功能是，然后使用而不是。它将在支持HTML5的浏览器上显示(特定于浏览器的)clear按钮。

#2

75  

Nowadays with HTML5, it's pretty simple:

现在HTML5非常简单:

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

Most modern browsers will automatically render a usable clear button in the field by default.

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

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

(If you use Bootstrap, you'll have to add an override to your css file to make it show)

(如果您使用Bootstrap，您必须向css文件添加一个覆盖以显示它)

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

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

Safari/WebKit browsers can also provide extra features when using type="search", like results=5 and autosave="...", but they also override many of your styles (e.g. height, borders) . To prevent those overrides, while still retaining functionality like the X button, you can add this to your css:

Safari/WebKit浏览器在使用type="search"时也可以提供额外的功能，比如结果=5和autosave="……，但它们也会覆盖你的许多风格(例如身高、边框)。为了防止这些重写，在保留X按钮等功能的同时，您可以将其添加到您的css中:

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

See css-tricks.com for more info about the features provided by type="search".

有关type="search"提供的功能的更多信息，请参见css- info。

#3

33  

HTML5 introduces the 'search' input type that I believe does what you want.

HTML5引入了“搜索”输入类型，我相信这就是你想要的。

<input type="search" />

< input type = "搜索" / >

Here's a live example.

这是一个生活的例子。

#4

23  

Check out our jQuery-ClearSearch plugin. It's a configurable jQuery plugin - adapting it to your needs by styling the input field is straightforward. Just use it as follows:

查看我们的jQuery-ClearSearch插件。这是一个可配置的jQuery插件——通过样式化输入字段来适应您的需要是很简单的。使用方法如下:

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

​ Example: http://jsfiddle.net/wldaunfr/FERw3/

例如:http://jsfiddle.net/wldaunfr/FERw3/

#5

15  

You can't actually put it inside the text box unfortunately, only make it look like its inside it, which unfortunately means some css is needed :P

不幸的是，你不能把它放入文本框中，只能让它看起来像它的内部，不幸的是，这意味着需要一些css:P

Theory is wrap the input in a div, take all the borders and backgrounds off the input, then style the div up to look like the box. Then, drop in your button after the input box in the code and the jobs a good'un.

理论是将输入包装在一个div中，将所有的边框和背景从输入中去掉，然后将div设置成与框相似的样式。然后，在输入框之后，在代码和作业中输入一个好的un。

Once you've got it to work anyway ;)

一旦你让它发挥作用;)

#6

1  

I got a creative solution I think you are looking for

我有一个创造性的解决方案，我想你正在寻找

$('#clear').click(function() {
  $('#input-outer input').val('');
});
body {
  font-family: "Tahoma";
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #e7e7e7 solid;
  border-radius: 20px;
}
#input-outer input {
  height: 2em;
  width: 80%;
  border: 0px;
  outline: none;
  margin: 0 0 0 10px;
  border-radius: 20px;
  color: #666;
}
#clear {
  position: relative;
  float: right;
  height: 20px;
  width: 20px;
  top: 5px;
  right: 5px;
  border-radius: 20px;
  background: #f1f1f1;
  color: white;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
#clear:hover {
  background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear">
    X
  </div>
</div>

https://jsfiddle.net/qdesign/xn9eogmx/1/

https://jsfiddle.net/qdesign/xn9eogmx/1/

#7

0  

@Mahmoud Ali Kaseem

@Mahmoud阿里Kaseem

I have just changed some CSS to make it look different and added focus();

我刚刚修改了一些CSS，使它看起来不同，并添加了focus();

https://jsfiddle.net/xn9eogmx/81/

https://jsfiddle.net/xn9eogmx/81/

$('#clear').click(function() {
  $('#input-outer input').val('');
  $('#input-outer input').focus();
});
body {
  font-family: "Arial";
  font-size: 14px;
}
#input-outer {
  height: 2em;
  width: 15em;
  border: 1px #777 solid;
  position: relative;
  padding: 0px;
  border-radius: 4px;
}
#input-outer input {
  height: 100%;
  width: 100%;
  border: 0px;
  outline: none;
  margin: 0 0 0 0px;
  color: #666;
  box-sizing: border-box;
  padding: 5px;
  padding-right: 35px;
  border-radius: 4px;
}
#clear {
  position: absolute;
  float: right;
  height: 2em;
  width: 2em;
  top: 0px;
  right: 0px;
  background: #aaa;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 0px 4px 4px 0px;
}
#clear:after {
  content: "\274c";
  position: absolute;
  top: 4px;
  right: 7px;
}
#clear:hover,
#clear:focus {
  background: #888;
}
#clear:active {
  background: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input-outer">
  <input type="text">
  <div id="clear"></div>
</div>

#8

0  

Of course the best approach is to use the ever-more-supported <input type="search" />.

当然，最好的方法是使用更受支持的。

Anyway for a bit of coding fun I thought that it could be achieved also using the form's reset button, and this is the working result (it worths notings that cannot live other inputs but the search field with this approach, or the reset button will erase them too), no javascript needed:

反正一会儿编码的乐趣我认为它还可以实现使用表单的复位按钮,这是工作的结果(值得注意的是,不能其他输入,但这种方法的搜索框,或重置按钮将删除),不需要javascript:

form > div{
    position: relative;
    width: 200px;
}

form [type="text"] {
    width: 100%;
    padding-right: 20px;
}

form [type="reset"] {
    position: absolute;
    border: none;
    display: block;
    width: 16px;
    border-radius: 20px;
    top: 2px;
    bottom: 2px;
    right: -20px;
    background-color: #ddd;
    padding: 0px;
    margin: 0px;
}
<form>
	<div>
		<input type="text" />
		<input type="reset" value="X" />
	</div>
</form>

标签：

相关文章