Tags Input
Código HTML:
Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es"> <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"> *, *: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;
}
var inputTagging = {
params : [],
exp : new RegExp('\\s'), //carácter 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);
<input type="text" class="inputTags" placeholder="tags con barra espaciadora"><input type="hidden" name="elinput[]">
<input type="text" class="inputTags" placeholder="tags con barra espaciadora"><input type="hidden" name="elinput[]">
- Para cambiar el carácter con el que se crearán los tag, editar esta línea - exp : new RegExp('\\s') -con el carácter deseado. Por defecto es la barra espaciadora
- El campo que se ha de recoger en el envío, es el campo hidden --> elinput[]
En caso de querer de reemplazar tanto por tags como por imágenes, añade este función
Código HTML:
Ver originalimagenes: function(val) {
return {
'concepto1' : 'urlimg.jpg',
'concepto2' : 'urlimg.jpg',
'concepto3' : 'urlimg.jpg'
} [val] || null;
},
y reemplaza la línea 127
por
Código HTML:
Ver originalvar img = this.imagenes(tagLimpio);
if (typeof img == 'object') {
sp.textContent = tagLimpio;
} else {
sp.innerHTML = '<image src="' + img + '">';
}