点击删除，html答案

【问题标题】：onclick remove, html点击删除，html
【发布时间】：2011-09-23 03:43:51
【问题描述】：

我正在使用 webapp-net 为 iOS/android 构建应用程序。在我的应用程序中，我有一个带有一些文本字段的表单。我希望输入输入时通常出现在文本字段上的“X”图标。通过单击该图标，您可以一键删除整个输入。图标“X”仅在输入输入时出现，当文本字段为空时，图标不可见。如果你能给我一个如何做的例子，我将不胜感激。

【问题讨论】：

有<input type="search">自动实现了这个功能，但它的左侧也有一个放大镜图标。

标签： javascript html css webapp-net

【解决方案1】：

这个简单的 html 展示了如何有一个输入字段和一个 X 按钮，当按下时会调用一个干净的函数

<input type="text" onkeypress="show();" id="text" /><div id="close" onclick="clean();" style="display:none">x</div>

现在是javascript

<script type="text/javascript">
   function show(){
      document.getElementById('close').style.display = ''; //shows the X button when text is entered;
   }

   function clean(){
      document.getElementById('close').style.display = 'none'; //hides the X button
      document.getElementById('text').value = ""; //clears the field
   }
</script>

当然，这缺少验证，例如按下什么类型的键以避免在按下 SHIFT 或 CTRL 时显示 X 按钮

【讨论】：

谢谢，但这不是我要找的东西。我只是在自己的代码中使用了这段代码，它可以工作，但不是我想要的，“x”总是打印在下一行，而不是同一行。
这很容易解决。我不知道您的代码，但您可以添加一个表格并将其放入不同的 td 中，或者您可以使用 div 对齐
我使用了 div 对齐，但我仍然在下一行得到“x”。我没有在文本字段中得到它，就像你在输入字符串值时进入 iPhone 一样，我不知道你是否明白我的意思。我认为在 iphone 中他们使用了某种图像。
@JSantos：谢谢，我试着让它工作，但我做不到。我有一个
，当我在字段集中使用您的代码时，布局变得完全糟糕。没有任何效果。
您可能需要稍微调整一下 CSS 以使其与您的设计相匹配。请参阅字段集 jsfiddle.net/tnaZn/15 的相同示例