Cut & Paste Rescue Text and TEXTAREA values script
|
Description: One of the worst things that can
happen when a user is entering data into an INPUT type="text" or
TEXTAREA
element is an accidental browser reload or even crash- all the data is instantly
lost, to the horror of the user. This script uses HTML5's sessionStorage
to store the text entered into these fields as the user types, and recalls them in an event
of a page refresh or even browser crash (FF3.5+ only). The script works in IE6+,
FF3.5+, Google Chrome and Safari 4+.
Note: This script only works on INPUT type="text"
and
TEXTAREA
elements.
Example (refresh the page and notice how any data entered into the last two fields are preserved):
Directions:
Step 1: Add the following code to the <HEAD> section of your page:
Be sure to download rescuefieldvalues.js (right click and select "Save As"), the external file referenced by the above code.
Step 2: Add the below sample form to your <BODY>:
Customizing
To get the script to remember and rescue the value of particular text or textarea fields, first, make sure to give those fields a unique ID in the form's markup, for example:
<form> <p>Name: <input type="text" /></p> <p>Address*: <input type="text" id="address" style="width:200px;" /></p> <p>Feedback*:<br /> <textarea id="feedback" style="width:300px;height:200px">Your feedback here</textarea></p> </form>
Then, following your form and preferably at the very end of the
document, call the function rescuefieldvalues() with the ids of
those fields you wish to rescue their values from the dead in the event of a
browser refresh or crash:
<script type="text/javascript"> //call this function at the END of your page //SYNTAX: rescuefieldvalues(['fieldid1', 'fieldid2', 'etc']) rescuefieldvalues(['address', 'feedback']) //rescue data entered for form fields "address" and "feedback" </script>
And that's it! Your users can rest a little easier now knowing
that the text they entered into the fields "address" and "feedback"
will still be there if he/she accidently reloads the page or even after a
browser crash (FF3.5+ only).