当我刚开始玩博客园博问时，就感觉博客园里的标签的设计很有意思。当时就想，有机会一定要把这个设计自己做一下。可谁知道，这个思绪就只是在我的脑海里转了一圈，溜出去了。一年以后，在做一个项目时，一个页面上的关于添加作者的需求又让我想起了这个设计。于是，，，
首先我们分析一下这个设计。很显然这个设计不是一个简单的text类型的input标签，虽然外面的边框看着有那么点神似。大框框里面的字体是有样式的，那么肯定是由html标签，如span，label等包裹着的。然后根据css控制其样式。注意我们前面说了，大框框不是一个text类型的input标签，但是他确实是可以输入文字的，看见那个“|”线了吗，那就是编辑状态的光标。所以这个地方肯定有一个text类型的input标签。所以，经过分析，这个其实就是有div+span+input组合起来具有时髦功能的高级文本输入框，呵呵。
经过上面的分析，下面我们说说实现过程。
第一步很简单，纯div+css技术，准备一个div，套上样式，就可以看上去和上面的截图的样子差不多了。本人的div+css水平一般，项目时间紧迫，没有专门的前端。所以只能自己摸索着做一个效果了。下面是我做的效果：
第二步，很显然就是将我们的标签动态化，也就是加上javascript逻辑。这一步是有点儿麻烦，但是借助jQuery这么强大的javascript框架，也是很轻松的就都可以搞定。
为了实现javascript与page分离，结构更加清晰，我将所有的javascript逻辑以插件的形式封装了。同时这样的做法也便于javascript逻辑复用。
由于代码逻辑非常的简单，就不解释了，有兴趣的朋友下载源码看看。
ps：源码只是简单的，机械的实现了类似博客园标签的功能，供初学者看看还是可以的，但是若要用于实际的项目中，需要自己添加一下自己的逻辑。
当然这个也是可以继续开发的，比如与输入框的数据模糊匹配数据库的数据，将span标签的数据回传给服务器，等等。有时间的话，在做吧。