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

Question

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

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

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

Answer 1

ris*_*ism 5

基本步骤

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

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

Run Code Online (Sandbox Code Playgroud)

半工作实例

你仍然需要扩展点击处理程序以通过键盘来识别标签删除/编辑/退格/等...或者你可以使用点击事件来弹出另一个上下文菜单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>

Run Code Online (Sandbox Code Playgroud)

光标

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

归档时间：	16 年，8 月前
查看次数：	1018 次
最近记录：	16 年，8 月前