Home/ Questions/Q 168779
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T12:30:48+00:00

In my site, I would like to implement a textbox where people can input

  • 0

In my site, I would like to implement a textbox where people can input a set of strings separated by a separator character.
For example the tags textbox at the bottom of this page: tags(strings) delimited by space(separator).
To make it more clear to the user, it would make a lot of sence to give each string a different background color or other visual hint.
I don’t think this is possible with a regular input[text] control.

Do you deem it possible to create something like that with javascript? Has somebody done this before me already? Do you have any other suggestions?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Basic Steps

    1. Put a textbox in a div and style it too hide it.
    2. Make the div look like a text box.
    3. In the onClick handler of the div, set the input focus to the hidden text box.
    4. Handle the onKeyUp event of the hidden text box to capture text, format as necessary and alter the innerHtml of the div.

    Tis quite straightforward. I’ll leave you to write your formatter but basically you’d just splitString on separator as per the Semi-Working-Example.

    Simple Outline

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

    Semi-Working Example

    You still need to extend the click handlers to account for tag deletion/editing/backspacing/etc via keyboard…. or you could just use a click event to pop up another context menu div. But with tags and spacer ids identified in the code below that should be pretty easy: 

    <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

    You could CSS the cursor using blink (check support) or otherwise just advance and hide as necessary an animated gif.

    • 0