在类似按钮的UI元素中包装文本框文本

对于奇怪的标题感到抱歉：因为我不知道如何调用此效果，我不知道如何通过Google或Stack Overflow搜索它...在类似按钮的UI元素中包装文本框文本

我想要描述的一个例子可以在雅虎邮箱的“撰写邮件屏幕”上找到。当你完成输入一个电子邮件地址（或选择自动完成建议）中的电子邮件地址的文本“到：”有一个样式应用盒子，使得它看起来像一个按钮：

enter image description here

2012-07-23 Mike C.

andyzinsser提供了一个链接到一个资源如何做到这一点...有谁知道这是什么，但正确调用？我想适当地更新这个问题的标题。 – 2012-07-23 20:17:20

2012-07-23 20:10:09 andyzinsser

这是我正在寻找的精确！仍然不知道该怎么称呼它...真棒，有人可以帮我找到它，即使不知道正确的名称。 :-) – 2012-07-23 20:14:36

截图很有帮助。 – andyzinsser 2012-07-23 20:17:24

我不知道什么效果被正式调用，但我最近做了类似的事情。

我写它作为一个jQuery插件。

基本要点是创建一个div和一个文本框来填充它。听取文本框上的字符事件并在选项卡上/返回在文本框左侧用您想要显示的文本创建一个新的div。在js中，您可以测量渲染div的宽度并将文本输入定位到右侧。

我还做了这么退出键清除所有的标签/关键字一个空的文本输入按ENTER键触发的事件，就像一个submisssion 并点击标签替换为文本输入的div来允许用户修改标签到位

我在iPad上在莫所以没有样品，但希望指出你在写方向。

2012-07-23 20:07:20 sambomartin

回答