JSFiddle - React, Tailwind, and code Playground

by kspr

HTML

<div id="campos-onodera">
    <input class="campo" type="text" name="campo-1" />
    <input class="campo" type="text" name="campo-2" />
    <input class="campo" type="text" name="campo-3" />
</div>

CSS

body {
    padding: 20px 40px;
}

#campos-onodera > input {
    border: 1px solid #95a5a6;
    display: block;
    margin-bottom: 10px;
    padding: 6px;
    width: 100%;
}

.enciende {
    border: 1px solid #2ecc71;
    box-shadow: 0px 0px 2px #2ecc71;
}

.apaga {
    background: #f1f1f1;
}

JavaScript

(function () {
    'use strict';
    var inputs, array;
    
   	// definimos los nodos, querySelectorAll nos regresa un objeto
    // NodeList
    inputs = document.querySelectorAll('#campos-onodera > .campo');
    
    // queremos que ese NodeList (inputs) sea un array, hagamoslo uno
    // para facilitarnos las cosas y poder usar Array.forEach
    array = [].slice.call(inputs);
    
    // aca recorremos todos los inputs
    // para mas info: 
    // http://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/forEach
    array.forEach(function (input, index) {
        // cuando hay focus
        input.addEventListener('focus', enciende);
        input.addEventListener('blur', apaga);
    });
    
    // notese que "this" es el input, ya que addEventListener
    // paso el input como el contexto
    function apaga () {
        removeClass.call(this, 'enciende');
        addClass.call(this, 'apaga');
    }
    
    function enciende () {
        removeClass.call(this, 'apaga');
        addClass.call(this, 'enciende');
    }
    
    /* 	las siguientes funciones son para agregar o remover
    	una clase a un elemento, de la misma manera this, es
        el contexto, al usar .call(contexto, argumentos...)  */
    
    function addClass (className) {
    	var classes = [];
        
        classes = this.className.split(' ');
        
        if (classes.indexOf(className) === -1) {
        	classes.push(className);
        }
        
        this.className = classes.join(' ');
    }
    
    function removeClass (_className) {
        var classes = [];
        
        classes = this.className.split(' ');
        classes = classes.filter(function (_, className) {
            return (classes.indexOf(className) !== -1);
        });
        
        this.className = classes.join(' ');
    }
}());