¿Cómo aplicar este elemento? ¿Cuál es su nombre?

Alejandra_Sand · #1 (**permalink**) 26/07/2016, 16:51

Sé que se lee super estúpido el titulo del tema, pero es que realmente no sé como se llamen este tipo de elementos y quisiera implementarlos en los inputs de un formulario.
Esos que al teclear y colocar una "," se encierran en un bloque, pero más allá de los estilos, quisiera saber cual es funcionamiento del "value", por que aparentemente es sólo un input, que contiene varios elementos independientes y no una cadena de texto completa.

Me basta con que me den el nombre del elemento y por mi cuenta investigo como implementarlo, se los agradecería muchísimo.

AngelKrak · #2 (**permalink**) 26/07/2016, 22:42

nose pero talvez son como los Tags o algo asi

fishdesign · #3 (**permalink**) 27/07/2016, 09:55

Basta con buscar en Google "jquery input tags".

http://xoxco.com/projects/code/tagsinput/

y esta para Bootstrap: https://bootstrap-tagsinput.github.i...nput/examples/

Un saludo

IsaBelM · #4 (**permalink**) 05/08/2016, 05:55

o puro javascript

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
<head>
<title></title>
<meta charset="utf-8">
<meta name="language" content="es">
<meta name="distribution" content="global">
<meta name="rating" content="General">
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<style>
*, *:before, *:after {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
 
 
html {
    width: 100%;
    height: 100%;
    -ms-touch-action: none;
}
 
 
body {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;  
}
 
 
ul.cont-input {
    width: 25rem;
    overflow: auto;
    list-style-type: none;
    border: 1px solid rgb(193, 184, 184);
    margin: 0 auto;
}
 
 
ul.cont-input > li {
    float: left;
    padding: .2rem .2rem .2rem 0;
}
 
 
ul.cont-input > li > span {
    background-color: rgb(180, 212, 234);
    border: 1px solid rgb(15, 216, 186);
    border-radius: 3px;
    display: inline-block;
    padding: .1rem .9rem .1rem .1rem;
    margin: 0 .1rem;
}
 
 
ul.cont-input > li > span > i {
    font-size: .9rem;
    position: absolute;
    top: 0;
    right: 3px;
    display: inline;
    font-family: arial, sans-serif;
    line-height: .9rem;
    color: rgb(255, 0, 0);
    cursor: pointer;
}
 
 
input.inputTags {
    min-width: 3rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: inherit;
    outline: none;
}
</style>
<script>
var inputTagging = {
 
    params : [],
    exp : new RegExp('\\s'), //caracter con el que se creará un nuevo tag 
 
    escritura: function() {
 
        Array.prototype.forEach.call(document.querySelectorAll('.inputTags'), function(obj, i) {
 
            inputTagging.params.push(new Array());
 
            obj.addEventListener('keyup', function() {
 
                if (inputTagging.exp.test(this.value)) inputTagging.nuevoTag(this.value, this, i);
 
            }, false);
 
 
            document.querySelectorAll('.cont-input')[i].addEventListener('click', function() {
 
                obj.focus();
 
            }, false);
        })
 
    },
 
 
    nuevoTag: function(valTag, control, indice) {
 
        var tagLimpio = valTag.replace(this.exp, ''),  
        lis = document.createElement('li'),
        sp = document.createElement('span'), 
        cierre = document.createElement('i'), 
        LIcontrol = document.querySelectorAll('.r-input')[indice],
        controlpadre = LIcontrol.parentNode;
 
        sp.textContent = tagLimpio;
        cierre.textContent = 'x';
 
        cierre.addEventListener('click', function() {
            var li = this.parentNode.parentNode,
                ul = li.parentNode,
                listaNodos = Array.prototype.slice.call(ul.children),
                indexLi = listaNodos.indexOf(li);
            ul.removeChild(li);
            control.focus();
            inputTagging.params[indice].splice(indexLi, 1);
            control.nextSibling.value = inputTagging.params[indice];
        }, false);
 
        sp.appendChild(cierre);
        lis.appendChild(sp);
 
        controlpadre.insertBefore(lis, LIcontrol);
        control.value = '';
        control.focus();
 
        this.params[indice].push(tagLimpio);
        control.nextSibling.value = this.params[indice];
    }
}
 
 
document.addEventListener('DOMContentLoaded', function() {
 
    inputTagging.escritura();
 
}, false);
</script>
</head>
<body>
    <ul class="cont-input">
        <li class="r-input">
            <input type="text" class="inputTags" placeholder="tags con barra espaciadora"><input type="hidden" name="elinput[]">
        </li>
    </ul>
 
<br><br>
 
    <ul class="cont-input">
        <li class="r-input">
            <input type="text" class="inputTags" placeholder="tags con barra espaciadora"><input type="hidden" name="elinput[]">
        </li>
    </ul>
 
</body>
</html>

DEMO