多彩多姿的文本框的想法？

在我的网站中,我想实现一个文本框,人们可以在其中输入由分隔符分隔的一组字符串.
例如,此页面底部的标签文本框:由空格(分隔符)分隔的标签(字符串).
为了使用户更清楚,为每个字符串提供不同的背景颜色或其他视觉提示会很有用.
我不认为通过常规输入[文本]控件可以实现这一点.

你认为用javascript创建类似的东西是可能的吗？有人在我之前做过这件事吗？你有什么其他的建议？

基本步骤

将文本框放在div中并将其样式设置为隐藏它.

使div看起来像一个文本框.

在div的onClick处理程序中,将输入焦点设置为隐藏文本框.

处理隐藏文本框的onKeyUp事件以捕获文本,根据需要进行格式化并更改div的innerHtml.

这很简单.我会让你写下你的格式化程序,但基本上你只是按照Semi-Working-Example在分隔符上使用splitString.

简单的轮廓

    
    
    

    
    

    Some label here followed by a divved textbox:
    
    
    
    

半工作实例

你仍然需要扩展点击处理程序以通过键盘来识别标签删除/编辑/退格/等...或者你可以使用点击事件来弹出另一个上下文菜单div.但是在下面的代码中标识的标签和spacer ID应该非常简单:

    
    
    

    
    

    Enter tags below (Click and Type):

    
    
    
    

光标

您可以使用blink(检查支持)来CSS游标,或者只是提前并隐藏必要的GIF动画.