Question

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

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

Answer 1

基本步骤

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

这很简单。我将让你写你的格式化程序，但基本上你只是按照半工作示例在分隔符上使用splitString。

简单大纲

<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。但是，在下面的代码中标识的标签和spacer 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动画。

Answer 2

这非常有趣。对你的问题的简短回答是否定的。不是基本的输入元素。

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

显然，Facebook做得很接近这一点。当您向Facebook中的多个人写新消息时，您可以通过这种方式键入其姓名。每个识别出的新名称在这里添加了一个类似标签的名称，旁边有一个小十字架用于删除它。

他们似乎做的是通过绘制一个输入外观框并使用css从实际输入中删除所有样式来伪造输入区域大小。然后他们用javascript做了很多逻辑，这样如果你把朋友添加为标签并开始退格，它将立即删除整个朋友的名字。等

所以，是的，它是可行的，但需要付出很多努力并增加了可访问性问题。

Answer 3

你可以看看他们是如何在像TinyMCE这样的脚本上做到这一点的，TinyMCE将这些功能添加到textareas。在textareas中，您可以使用HTML来着色文本。

Answer 4

您可以使用多个文本框

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

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

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

4 个答案: