使用jquery,我如何处理标签的方式与Live Mail处理电子邮件地址的方式相同?

时间:2009-04-15 03:52:50

标签: javascript jquery textbox richtextbox tagging

我需要一个类似于标签的系统,其运行方式与Live Mail的电子邮件地址非常相似。

对于那些不知道的人,Live Mail提供textbox,您可以在其中输入电子邮件地址。当您输入完电子邮件地址后,Live Mail会将地址从纯文本更改为具有边框并且文本在其中的div。如果要删除该地址,请将鼠标悬停在该地址上,并在右侧显示十字。 “标记”后,您无法更改地址。如果要更改它,则需要将其删除并重新添加。

这是我需要的功能,除了我将使用标签而不是电子邮件地址执行此操作。

我想知道是否有人知道以这种方式工作的jquery组件。

干杯,安东尼

2 个答案:

答案 0 :(得分:1)

我从来没有听说过这样的JQuery插件,但要自己完成它不应该太难。但是,当然需要一些关于CSS的实际外观知识。

// Code for replacing a textbox with a DIV on blur.
$('#textbox').blur(function () {
  var content = $(this).val();
  if (!content) return; // Don't make anything out of empty textboxes.
  // Create a DIV and make it a sibling to the textbox.
  $('<div>').html(content).appendTo($(this).parent());
  // Remove the textbox.
  $(this).remove();
});

顺便说一句,我还没有测试过这个,但这应该让你走上正轨。

HTH!

答案 1 :(得分:1)

jquery facebook autocomplete(通过Ajaxian

Jquery 1.6 UI上有一本书,其中包含电子邮件的自动填写功能以及自动填充功能的最后一个示例(book source code)。