多色文本框的想法？答案

【问题标题】：Ideas for multicolored textbox?多色文本框的想法？
【发布时间】：2010-10-16 13:43:36
【问题描述】：

在我的网站中，我想实现一个文本框，人们可以在其中输入一组由分隔符分隔的字符串。
例如此页面底部的标签文本框：标签（字符串）由空格（分隔符）分隔。
为了让用户更清楚，给每个字符串一个不同的背景颜色或其他视觉提示会很有意义。
我认为使用常规 input[text] 控件是不可能的。

你认为可以用 javascript 创建类似的东西吗？有人在我之前做过吗？您还有其他建议吗？

【问题讨论】：

标签： html

【解决方案1】：

基本步骤

在 div 中放置一个文本框并将其样式隐藏起来。
让 div 看起来像一个文本框。
在 div 的 onClick 处理程序中，将输入焦点设置为隐藏的文本框。
处理隐藏文本框的 onKeyUp 事件以捕获文本，根据需要设置格式并更改 div 的 innerHtml。

这很简单。我会让你编写格式化程序，但基本上你只需按照半工作示例在分隔符上拆分字符串。

简单大纲

<html>
    <head>
    <script language="javascript" type="text/javascript">
    function focusHiddenInput()
    {
        var txt = document.getElementById("txtHidden");
        txt.focus();
    }

    function formatInputAndDumpToDiv()
    {
        alert('Up to you how to format');
    }
    </script>
    </head>

    <body>
    <div onclick="focusHiddenInput();">
    Some label here followed by a divved textbox:
    <input id="txtHidden" style="width:0px;" onKeyPress="formatInputAndDumpToDiv()" type="text">
    </div>
    </body>
    </html>

半工作示例

您仍然需要扩展点击处理程序以通过键盘处理标签删除/编辑/退格/等...或者您可以只使用点击事件来弹出另一个上下文菜单 div。但是使用下面代码中标识的标签和间隔 ID 应该很容易：

<html>
    <head>
    <script language="javascript" type="text/javascript">

    var myTags=null;

    function init()
    {
        document.getElementById("txtHidden").onkeyup= runFormatter;
    }

    function focusHiddenInput()
    {
        document.getElementById("txtHidden").focus();
    }

    function runFormatter()
    {
        var txt = document.getElementById("txtHidden");
        var txtdiv = document.getElementById("txtBoxDiv");
        txtdiv.innerHTML = "";
        formatText(txt.value, txtdiv);
    }

    function formatText(tagText, divTextBox)
    {
        var tagString="";
        var newTag;
        var newSpace;
        myTags = tagText.split(' ');
        for(i=0;i<myTags.length;i++) {
            newTag = document.createElement("span");
            newTag.setAttribute("id", "tagId_" + i);
            newTag.setAttribute("title", myTags[i]);
            newTag.setAttribute("innerText", myTags[i]);

            if ((i % 2)==0) {
           newTag.style.backgroundColor='#eee999';  
        }
        else
        {
           newTag.style.backgroundColor='#ccceee'; 
        }
            divTextBox.appendChild(newTag);
            newTag.onclick = function(){tagClickedHandler(this);}

            newSpace = document.createElement("span");
            newSpace.setAttribute("id", "spId_" + i);
            newSpace.setAttribute("innerText", " ");
            divTextBox.appendChild(newSpace);

            newSpace.onclick = function(){spaceClickedHandler(this);}
       }
    }

    function tagClickedHandler(tag)
    {
      alert('You clicked a tag:' + tag.title);  
    }   

    function spaceClickedHandler(spacer)
    {
      alert('You clicked a spacer');    
    }   

    window.onload=init;
    </script>
    </head>

    <body>
    <div id="txtBoxDivContainer">
    Enter tags below (Click and Type):<div id="txtBoxDiv" style="border: solid 1px #cccccc; height:20px;width:400px;" onclick="focusHiddenInput();"></div>
    <input id="txtHidden" style="width:0px;" type="text">
    </div>
    </body>
    </html>

光标

您可以使用闪烁（检查支持）对光标进行 CSS 处理，或者根据需要前进和隐藏动画 gif。

【讨论】：

【解决方案2】：

这很有趣。您的问题的简短回答是否定的。与基本输入元素无关。

真正的答案是：也许有一些 javascript 的诡计。

显然 Facebook 做了一些类似的事情。当您在 Facebook 中向多个人写新消息时，您可以通过这种方式输入他们的姓名。每个已识别的新名称都在此处添加有点像一个标签，并在其旁边有一个小十字用于删除它。

他们似乎在做的是通过绘制一个看起来像输入的框并使用 css 从实际输入中删除所有样式来伪造输入区域大小。然后他们用javascript完成了大量的逻辑，所以如果你添加了一个朋友作为标签并开始退格，它会立即删除整个朋友的名字。等等

所以，是的，这是可行的，但需要付出大量努力并增加可访问性问题。

【讨论】：

是的，我猜这会是很多工作，所以我暗中希望这样的事情已经在某个地方被查询了；）但我认为这是值得的，因为它会增加很多价值实际上有很多网站。

【解决方案3】：

您可以在 TinyMCE 之类的脚本中查看他们是如何做到这一点的，这些脚本将此类功能添加到 textareas。在 textareas 中，您可以使用 HTML 为文本着色。

【讨论】：

我不认为我正在寻找一个成熟的编辑器，但实际上，我可能会看看他们是如何做到的。
是的，我推断出:) 偷看确实是个好主意。

【解决方案4】：

您可以使用多个文本框

textbox1 <space> textbox2 <space> textbox3 ....

等等...然后您可以将背景颜色样式应用到每个文本框。

【讨论】：

除非我可以让它们看起来只是一个文本框，否则我认为这会使界面更加混乱，而不是相反。但我也一直在考虑这条路。