//<[CDATA[
/* js/external.js - tiny library for reuse */
var doc, bod, html, nav, mobile, M, I, S, Q, special, unspecial, ucFirst, ucEvery; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body; html = doc.documentElement; nav = navigator;
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
special = function(str){
return str.replace(/&/g, '&').replace(/'/g, ''').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
unspecial = function(str){
return str.replace(/&/g, '&').replace(/'/g, "'").replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
ucFirst = function(string){
var s = string.split('');
if(s.length)s[0] = s[0].toUpperCase();
return s.join('');
}
ucEvery = function(string){
for(var i=0,a=string.split(' '),s,r=[],l=a.length; i<l; i++){
r.push(ucFirst(a[i]));
}
return r.join(' ');
}
/* you may want to do the rest below here on another external page (the load end must stay) - or not */
var guarantee = I('guarantee');
I('uc_every').onkeyup = function(e){
if(e.key !== ' '){ // not a space bar
var v = ucEvery(this.value);
this.value = v; guarantee.innerHTML = special(v);
}
}
}); // load end
/* external.css */
html,body{
background:#ccc;
}
*{
box-sizing:border-box;
}
input[type=text]{
width:100%;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<input id='uc_every' type='text' value='' />
<div id='guarantee'></div>
</body>
</html>