Des idées pour une boîte de texte multicolore?

Dans mon site, je voudrais mettre en œuvre une zone de texte où les gens peuvent entrer un ensemble de chaînes séparées par un caractère de séparation.
Par exemple la zone de texte des balises en bas de cette page: balises (chaînes) délimitées par l'espace (séparateur).
Pour le rendre plus clair pour l'utilisateur, cela donnerait beaucoup de sens à chaque couleur de fond ou autre indice visuel.
Je ne pense pas que ce soit possible avec un contrôle [text] d'entrée régulier.Des idées pour une boîte de texte multicolore?

Est-ce que vous pensez qu'il est possible de créer quelque chose comme ça avec javascript? Est-ce que quelqu'un l'a déjà fait avant moi? Avez-vous d'autres suggestions?

Source

2009-03-31 Boris Callens

Étapes de base

Mettre une zone de texte dans un div style et il cache aussi il.
Faites de la div une sorte de zone de texte.
Dans le gestionnaire onClick du div, définissez le focus d'entrée sur la zone de texte masquée.
Gérez l'événement onKeyUp de la zone de texte masquée pour capturer le texte, formater si nécessaire et modifier le innerHtml de la div.

C'est assez simple. Je vais vous laisser écrire votre formateur, mais en gros, vous ne feriez que splitter sur le séparateur selon l'exemple de semi-travail.

Outline Simple

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

Vous devez toujours étendre les gestionnaires de clic pour tenir compte de la suppression de tag/édition/retour arrière/etc via le clavier .... ou vous pouvez simplement utiliser un événement click pour afficher un autre menu contextuel div. Mais avec des étiquettes et ids d'espacement identifiés dans le code ci-dessous qui devrait être assez facile:

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

curseur

Vous pouvez Css le curseur à l'aide clignement (vérifiez support) ou non simplement avancer et se cacher au besoin un gif animé.

Source

2009-03-31 08:23:55 rism

Oui, ça pourrait marcher :) –

Vous pouvez regarder comment ils font cela à des scripts comme TinyMCE, qui ajoutent de telles fonctionnalités aux zones de texte. Dans les textareas, vous pouvez utiliser le HTML pour colorier le texte.

Source

2009-03-31 07:47:01 Ikke

Je ne pense pas qu'un éditeur complet est ce que je cherche, mais en effet, je pourrais probablement vérifier comment ils l'ont fait. –

aurait dû être plus clair. C'est ce que je voulais dire. – Ikke

Oui, j'en ai déduit :) C'est en effet une bonne idée d'avoir un coup d'oeil. –

-1

Vous pouvez utiliser plusieurs zones de texte

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

et ainsi de suite ... Vous pouvez alors appliquer le style de couleur d'arrière-plan à chaque zone de texte.

Source

2009-03-31 07:49:38 Kirtan

à moins que je puisse leur donner l'apparence d'une seule zone de texte, je pense que cela rendra l'interface plus confuse plutôt que l'inverse. Mais j'ai aussi réfléchi à cette voie. –

Ceci est assez intéressant. La réponse courte à votre question est non. Pas avec l'élément d'entrée de base.

La vraie réponse est: Peut-être avec une supercherie avec javascript.

Apparemment, Facebook fait quelque chose de proche. Lorsque vous écrivez un nouveau message à plusieurs personnes sur Facebook, vous pouvez taper leurs noms de cette façon. Chaque nouveau nom reconnu est ajouté un peu comme une étiquette ici et a une petite croix à côté de l'enlever. Ce qu'ils semblent faire, c'est simuler la taille de la zone d'entrée en dessinant une boîte de saisie d'entrée et en supprimant tout style de l'entrée réelle avec css. Ensuite, ils ont beaucoup de logique avec javascript de sorte que si vous avez ajouté un ami comme un tag et commencer à revenir en arrière, il va supprimer le nom de l'ensemble des amis à la fois.

Donc, oui, c'est faisable, mais prend beaucoup d'effort et ajoute des problèmes d'accessibilité.

Source

2009-03-31 07:57:02

Oui, je pensais que ce serait beaucoup de travail donc j'espérais secrètement que quelque chose comme ça était déjà jeté quelque part;) Mais je pense que ça vaut le coup car cela ajouterait beaucoup de valeur à beaucoup de sites en fait. –

Des idées pour une boîte de texte multicolore?

Répondre

Questions connexes