如何像iPhone一样在HTML文本输入框中放置一个清除按钮？
我希望有一个漂亮的小图标，单击该图标可以清除[HTML_REMOVED]框中的文本。
这是为了节省空间，而不是在输入框外部没有清晰的链接。
我的CSS技能很弱…这是一个 屏幕截图iPhone外观的照片。
问题答案：
@thebluefox总结了全部。您还只需要使用JavaScript即可使该按钮正常工作。这是一个SSCCE，您可以复制’n’粘贴’n’运行它：
<!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：
<!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的浏览器上显示（特定于浏览器的）清除按钮。
-
问题内容： 我不确定是否已经询问过此问题，但是我有多个输入框，其中包含默认文本。我不是要设置默认的文本，而是要在单击输入框时删除它。我希望能够在单击输入框后立即删除默认文本，因此用户不必这样做。我想知道是否有人可以分享一个有关如何完成此操作的快速示例，以便我可以实施。 到目前为止，我已经知道了，但是只删除了最后一个输入框文本。 问题答案： 假设您已整理好默认文本，则想在某个地方创建事件绑定，并使用
-
问题内容： 我是Rails编程的初学者，试图在页面上显示许多图像。有些图像要放在其他图像之上。为简单起见，假设我要一个蓝色正方形，在蓝色正方形的右上角有一个红色正方形（但在角落不紧）。由于性能问题，我试图避免进行合成（使用ImageMagick等）。 我只想相对于彼此放置重叠的图像。 举一个更困难的例子，想象一下将里程表放在更大的图像中。对于六位数字，我将需要合成一百万个不同的图像，或者即时进行处
-
我需要清除编辑文本时单击按钮。在java中，我们使用getText或setText，但在科特林中，我找不到任何东西。 我尝试使用此选项，但---text=“”---导致类型不匹配
-
我目前正在用Java编写一个程序，其中我需要从用户那里获得输入，这是一段文本。然而，我需要用户能够在一次输入文本的多个段落。当程序提示输入时，只需粘贴整段文本就可以实现这一点。我对输入使用扫描器，当我将多个段落粘贴到输入中时，无论何时打印存储文本的变量，都不会抛出错误，只输出第一节（在第一个换行符之前）。如何使用多个换行符存储整段文本，而不提示用户为每个文本块输入单独的输入？ 我已经有了一些代码，
-
问题内容： 我想清除表单中的文件输入。 我知道将源设置为相同的方法…但是该方法不会删除所选的文件路径。 注意 ：我希望避免重新加载页面，重置表单或执行AJAX调用。 这可能吗？ 问题答案： 如何删除该节点，创建一个具有相同名称的新节点？
-
问题内容： 我连续有3个文本框，并且正在使用JS在文本框中输入文本。但是问题是当我在一个字段中输入文本，然后转到第二个框中输入文本时，第一个文本框中的值将被删除。我们正在使用下面的代码输入文本 问题答案： 尝试以下方法： 确保在按下第二个和第三个之前实现。