JSFiddle - React, Tailwind, and code Playground

by einaregilsson

HTML

<body>
    <h2>Example of multi input box paste</h2>
    <p>
        This Fiddle is inspired by me having to update 15 domains at 
        <a href="http://iwantmyname.com">iwantmyname.com</a>, and not 
        wanting to copy and paste the name of each name server (4 per domain).
        See <a href="http://einaregilsson.com/multi-input-paste/" target="_blank">blog post</a> for more details.
    </p>
    <div>
        <div>Nameserver 1: <input type="text" id="ns1" placeholder="Enter nameserver 1" /></div>
        <div>Nameserver 2: <input type="text" id="ns2" placeholder="Enter nameserver 2" /></div>
        <div>Nameserver 3: <input type="text" id="ns3" placeholder="Enter nameserver 3" /></div>
        <div>Nameserver 4: <input type="text" id="ns4" placeholder="Enter nameserver 4"/></div>
        <div>Nameserver 5: <input type="text" id="ns5" placeholder="Enter nameserver 5"/></div>
        
    </div>
    <p>
        Try copying the following block of text, and then putting the cursor in the first input box, and pasting:
    </p>
    <p>
        mynameserver1.com<br/>
        mynameserver2.com<br/>
        mynameserver3.com<br/>
        mynameserver4.com<br/>
        mynameserver5.com<br/>
    </p>
    <p>
        Now try copying this block, where 2 and 3 are invalid server names, and paste them in:
    </p>
    <p>
        mynameserver1.com<br/>
        what is this I don't even<br/>
        "$&$%/$%&#$%"<br/>
        mynameserver4.com<br/>
        mynameserver5.com<br/>
    </p>

</body>

CSS

body {
    font-family:Arial, sans-serif;
}
div {
    margin:5px;
}

.valid {
    border:solid 1px green;
    box-shadow:green 0 0 3px;
}

.invalid {
    border:solid 1px red;
    box-shadow:red 0 0 3px;
    
}

JavaScript

var strip = function(s) { return s.replace(/^\s*|\s*$/g, ''); }

//Add paste listener. In a production environment this would of course
//need the proper checks to see what's supported, old IE versions, blah blah
document.getElementById('ns1').addEventListener('paste', function(e) {
    var lines = strip(e.clipboardData.getData('Text')).split(/\r?\n/);
    if (lines.length == 1) {
        return; 
    }
    for (var i = 1; i <= Math.min(5, lines.length); i++) {
        var el = document.getElementById('ns'+i);
        el.value = strip(lines[i-1] || '');
        
        //Trigger the blur event on all input boxes, so we immediately
        //get feedback on whether the server names were valid.
        var ev = document.createEvent('HTMLEvents');
        ev.initEvent('blur', true, true);
        el.dispatchEvent(ev);
    }
    e.preventDefault();
});

//Set up validation on blur events
var inputs = document.getElementsByTagName('input');
for (var i=0; i< inputs.length; i++) {
    inputs[i].addEventListener('blur', function(e) {
        var input = e.target;
        if (input.value.match(/^[a-zA-Z0-9\.-]+$/)) {
            input.classList.remove('invalid');
            input.classList.add('valid');
        } else {
            input.classList.remove('valid');
            input.classList.add('invalid');
        }
    });
}