web-dev-qa-db-fra.com

Comment stackoverflow fait-il son champ de saisie Tag?

Comment StackOverflow crée son système de balises. Comment peut-il formater le html dans une zone de texte?

Je ne sais pas par où commencer. Si quelqu'un peut me guider, alors je peux savoir quelle direction prendre afin que je puisse écrire du code que quelqu'un peut vérifier.

Comme ça:

enter image description here

EDIT: Fondamentalement, quand j'appuie sur l'espace, comment ajouter un nouvel élément/div à l'intérieur du div?

htmlinputtags
41
Mathew Kurian

Ce que je ferais c'est:

  • Créez un DIV principal avec une bordure (comme ici la bordure 1px solide # 000)
  • Après, à l'intérieur de cette DIV, je vais créer une autre DIV (float: gauche;), une autre DIV (float: droite) et une entrée à l'intérieur de la div droite.

Lorsque vous écrivez à l'intérieur de l'entrée et disons que vous sélectionnez HTML, cela crée une étendue dans le DIV gauche et réduit la largeur du div droit pour correspondre à la taille restante. Bien sûr, à l'intérieur de votre plage, il y a le texte HTML avec le signe de suppression.

Vous pouvez le faire facilement en utilisant jQuery.

Exemple:

<div id="master_div">
    <div id="categories">

    </div>
    <div id="input">
        <input type="text" value="" />
    </div>
</div>

Et vous écrivez du jQuery/JS

20
David Bélanger

Qu'en est-il de la solution Bootstrap?

Vous pouvez essayer ceci:

Code HTML:

<input type="text" value="html,input,tag" data-role="tagsinput"></input>

Pour CSS, appelez ces deux fichiers:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

Pour Javascript, appelez ces deux fichiers:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

Le code générera le résultat ci-dessous:

enter image description here

Vérifiez-le.

</strong>

20
Jad Chahine

Ce n'est pas le cas. Si vous regardez le DOM, vous voyez initialement juste une zone de saisie. Une fois que vous ajoutez une balise, elle insère un <span> balise avant la zone de saisie avec cette balise et son icône de suppression. La zone de saisie se trouve maintenant à droite de cette <span> tag. Lorsque vous cliquez sur une balise pour la modifier, elle place une zone de texte à sa place afin que vous puissiez la modifier. Tout cela se fait avec Javascript et il existe des plugins JQuery pour vous aider à le faire. En voici une à partir d'une recherche rapide sur Google: http://xoxco.com/projects/code/tagsinput/

En ce qui concerne le style, le <span> les éléments peuvent avoir le CSS que vous voulez.

7
sachleen
var es = document.querySelectorAll('.input-categories');
for (var i = 0; i < es.length; i++) {
  es[i]._list = es[i].querySelector('ul');
  es[i]._input = es[i].querySelector('input');
  es[i]._input._icategories = es[i];
  es[i].onkeydown = function(e){
    var e = event || e;
    if(e.keyCode == 13) {
      var c = e.target._icategories;
      var li = document.createElement('li');
      li.innerHTML = c._input.value;
      c._list.appendChild(li);
      c._input.value = '';
      e.preventDefault();
    }
  }
}
*{
  margin: 0px;
  padding: 0px;
}

.input-categories{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border: 1px solid black;
}

.input-categories ul{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  flex-wrap: wrap;
}

.input-categories li{
  border: 1px solid black;
  border-radius: 2px;
  padding: 1px;
  margin: 1px;
}
.input-categories input{
  flex: 1 1 auto;
  align-self: flex-start;
}
<div class="input-categories">
  <ul>
    <li>moscow</li>
    <li>new york</li>
  </ul>
  <input type="text"/>
</div>

<div class="input-categories">
  <ul>
    <li>CSS</li>
    <li>PHP</li>
  </ul>
  <input type="text"/>
</div>
3
Максим