All geek questions in one place

Ideas for a multicolor text box?

On my site, I would like to implement a text box in which people can enter a set of lines separated by a separator character.
For example, the text box for tags at the bottom of this page: tags (lines), separated by a space (separator).
To make it more understandable to the user, it would be very useful to give each line a different background color or a different visual hint.
I do not think that this is possible with the usual input [text].

Do you find it possible to create something like this using javascript? Has someone done this before me already? Do you have any other suggestions?

+3
source share
4 answers

Main steps

  • div , .
  • div .
  • onClick div .
  • onKeyUp , innerHtml div.

. , String - .

<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>

, // /etc .... click div. spacer, , :

<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>

Cursor

CSS blink ( ) gif.

+5

. - . .

: , javascript.

-, Facebook - . Facebook, . .

, , , , - css. , javascript, , , . .

, , , .

+1

, , TinyMCE, . HTML .

0
source

You can use multiple text fields.

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

etc. You can then apply a background style to each text field.

-1
source

Source: https://habr.com/ru/post/1705628/

More articles:


All Articles