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

Question

很抱歉这个奇怪的标题：因为我不知道这个效果叫什么我不知道如何通过Google或Stack Overflow搜索它...

我想要描述的一个例子可以在Yahoo Mail“撰写邮件屏幕”中找到。当您完成输入电子邮件地址（或选择自动完成建议）后，“收件人：”框中的电子邮件地址文本应用了一个样式，使其看起来像一个按钮：

1. 此效果的名称是什么？

2. 我在哪里可以找到关于如何复制它的参考资料？

Answer 1

听起来这对你有用。 http://ivaynberg.github.com/select2/#tags

Answer 2

我不确定正式调用的效果是什么，但我最近做了类似的事情。

我把它写成了一个jquery插件。

基本要点是创建一个div和一个填充它的文本框。 在文本框和选项卡/返回上侦听角色事件，在文本框左侧创建一个新div，其中包含您要显示的文本。在js中，您可以测量渲染div的宽度，并将文本输入放在右侧。

我也做了它所以逃脱键清除所有标签/关键字 按下带有空文本输入的enter会触发一个事件，就像一个submisssion 点击标签会用文本输入替换div，以允许用户修改标签

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