/*! * Forminator T100: Protect all your form inputs from bad internet connections and an angry John Connor * @requires Jquery v1.4 or above * * Copyright (c) 2012 Frank M. Taylor * Dual licensed under MIT and GPL licenses * http://opensource.org/licenses/MIT * http://www.gnu.org/licenses/gpl.html * version 0.1.0 */ /* * USAGE * 1. apply .forminator() to any form * 2. include optional arguments for which selectors you want, whether we store on name or id, and clear button */ /* VERSIONS * 0.1.0 - First working version * 0.2.0 - Turned into a jQuery plugin */ ;(function ( $ ) { $.fn.forminator = function(storedFields, storageKey, clearButton) { form = this; if (this == " // CAPTURE FORM DATA $(form).children('input, datalist, keygen, optgroup, select, textarea').keyup(function(event){ var name = $(form).attr("id")+"-" + $(this).attr(storageKey); var value = $(this).val(); localStorage.setItem(name, value); currentval = $(this).val(); }); //use this for the input slider - since it doesn't use the keyboard $(form).children('[type="range"]').mousemove(function(event){ var name = $(this).attr(storageKey); var value = $(this).val(); localStorage.setItem(name, value); currentval = $(this).val(); }); //load the values into input forms $(form).children('input,textarea,select, datalist, keygen, optgroup').each(function(event) { var fieldkey = $(form).attr("id") + "-" + $(this).attr(storageKey); var fieldval = localStorage.getItem(fieldkey); $(this).val(fieldval); }); $(clearButton).click(function(event){ localStorage.clear(); }); }; })(jQuery); $('#elformo').forminator('input', 'name', '#clearIt');
<form id ="elformo" name="elformo" > <label for="date">date</label> <input type="date" placeholder="Date" name="Date"/> <label for="url">URL</label> <input type="URL" placeholder="URL" name="URL"/> <label for="email">Email</label> <input type="email" placeholder="email address" name="email"> <label for="range">Range</label> <input type="range" min="1" max="10" name="range" /> <label for="area">area</label> <textarea type="text" name="area" placeholder="Text area"></textarea> <button type="button" onclick="button()">send or something</button> <button type="button" id="clearIt">Clear</button> </form> <form id ="elformerito" name="elformo" > <label for="date">date</label> <input type="date" placeholder="Date" name="Date"/> <label for="url">URL</label> <input type="URL" placeholder="URL" name="URL"/> <label for="email">Email</label> <input type="email" placeholder="email address" name="email"> <label for="range">Range</label> <input type="range" min="1" max="10" name="range" /> <label for="area">area</label> <textarea type="text" name="area" placeholder="Text area"></textarea> <button type="button" onclick="button()">send or something</button> <button type="button" id="clearIt">Clear</button> </form> <section id="something"> <article id="editablearticle" contenteditable="true"> editable article </article> </section> <output name="form output" for="date URL email range area text" form="elformo"></output> <output id="info"> <h2>LocalStorage Info</h2> <p id="email"></p> <table id="keylist"> </table> </output>
/*CSS NORMALIZE *//*CSS NORMALIZE *//*CSS NORMALIZE *//*CSS NORMALIZE */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}audio,canvas,video{display:inline-block;display:inline;zoom:1;}audio:not([controls]){display:none;}[hidden]{display:none;}html{font-size:100%;/* 1 */overflow-y:scroll;/* 2 */-webkit-text-size-adjust:100%;/* 3 */-ms-text-size-adjust:100%;/* 3 */}body{margin:0;}body,button,input,select,textarea{font-family:sans-serif;}a:focus{outline:thin dotted;}a:hover,a:active{outline:0;}h1{font-size:2em;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}blockquote{margin:1em 40px;}dfn{font-style:italic;}mark{background:#ff0;color:#000;}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}q{quotes:none;}/* 2 */q:before,q:after{content:'';content:none;}small{font-size:75%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}ul,ol{margin-left:0;padding:0 0 0 40px;}dd{margin:0 0 0 40px;}nav ul,nav ol{list-style:none;list-style-image:none;}img{border:0;/* 1 */-ms-interpolation-mode:bicubic;/* 2 */}svg:not(:root){overflow:hidden;}figure{margin:0;}form{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em;}legend{border:0;/* 1 */margin-left:-7px;/* 2 */}button,input,select,textarea{font-size:100%;/* 1 */margin:0;/* 2 */vertical-align:baseline;/* 3 */vertical-align:middle;/* 3 */}button,input{line-height:normal;/* 1 */}button,input[type=button],input[type=reset],input[type=submit]{cursor:pointer;/* 1 */-webkit-appearance:button;/* 2 */overflow:visible;/* 3 */}input[type=checkbox],input[type=radio]{box-sizing:border-box;/* 1 */padding:0;/* 2 */}input[type=search]{-webkit-appearance:textfield;/* 1 */-moz-box-sizing:content-box;-webkit-box-sizing:content-box;/* 2 */box-sizing:content-box;}input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;/* 1 */vertical-align:top;/* 2 */}table{border-collapse:collapse;border-spacing:0;} /* END OF RESET*//* END OF RESET*//* END OF RESET*//* END OF RESET*//* END OF RESET*//* END OF RESET*/ body, header, footer, #main{ width: 60em; margin: 0 auto; } #main{ height: 30em; } form, output{ background: #fffefe; border-radius: 5px; border: 2px solid #333; display:block; } form{ width: 20em; margin: 0 1em; clear: left; float:left; height: 30em; } output{ height: 14em; width: 20em; float:right; margin: 0 0 1em; } label{ float:left; margin:0; font-size: 10px; height:12px; padding: 0; width: 100%; } form > input{ margin: 1em; padding: .5em; } input{ float:left; } input[type="email"], input[type="date"],input[type="url"]{ height: 1.5em; outline: none; border: 1px solid #efefef; background: #efefef; color: #777; } input[type="email"]:hover, input[type="email"]:focus, input[type="date"]:hover, input[type="url"]:hover, input[type="date"]:focus, input[type="url"]:focus{ border-color: #777; } footer{ }