单击提交按钮时使用关闭按钮使文本可清除答案

【问题标题】：Make a text clearable with a close button on click of Submit button单击提交按钮时使用关闭按钮使文本可清除
【发布时间】：2013-02-28 21:19:44
【问题描述】：

我需要在 jquery 中实现一个代码，我可以在文本字段中输入任何文本，然后在我点击“提交”按钮后，该文本应该变成一个可清除的字段，例如 this

我尝试将此框放在我的文本字段中，但这会使我的整个文本字段成为可清除的字段，

 $(document).ready(function(){
    $('input[type=text]').clearableTextField();
  });

我不想这样做，我希望当我在文本字段中输入内容并单击提交按钮时，它应该成为可清除的文本对象。任何帮助表示赞赏！

谢谢。

【问题讨论】：

$('form').submit(fucntion(){$('#inputId').val('');});
我不想清除该字段:) 我想在提交时使用关闭按钮使文本可清除。请参阅我随帖子附上的附件。

标签： javascript jquery css autocomplete

【解决方案1】：

实现这一点的一种方法（类似于在 Stack Overflow 上完成标记输入的方式）是在输入字段的左侧有一个单独的 div，其中放置“可清除的文本字段”。当点击提交按钮时（或者空格键被点击，或者任何javascript可以监听的触发器），让javascript在左侧div中创建一个新的span，并将输入字段的宽度减小相同的宽度作为新的span 标签。您可以在span 的 HTML/CSS 中包含删除按钮和任何相关样式。

这里有一个通过 jQuery 实现类似效果的演示：http://xoxco.com/projects/code/tagsinput/。（@sachleen 在回复similar question 时建议）

【讨论】：