├── style.css
├── readme.md
├── index.html
└── script.js
/style.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin:0;
4 | padding:0;
5 | background: #fff;
6 | }
7 |
8 | form,
9 | fieldset {
10 | margin: 2em;
11 | padding: 2em;
12 | }
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Form default text
2 |
3 | ## Post
4 |
5 | - [https://f90.co.uk/labs/form-default-text/](https://f90.co.uk/labs/form-default-text/)
6 |
7 | ## Example
8 |
9 | - [http://orangespaceman.github.io/form-default-text](http://orangespaceman.github.io/form-default-text)
10 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Form default text
4 |
5 |
6 |
7 |
8 |
9 |
16 |
17 |
18 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | /**
2 | * form utilities
3 | *
4 | */
5 | var formUtil = {
6 |
7 | /**
8 | * functions to clear a textbox of text
9 | * @param id string the id of the text field in question
10 | */
11 | autoFill : function (id){
12 |
13 | // retrieve the field, and access it's default text
14 | var field = document.getElementById(id);
15 | var defaulttext = field.value;
16 |
17 | // if default text is present when selected, hide it
18 | field.onfocus = function() {
19 | if (this.value == defaulttext) {
20 | this.value = "";
21 | }
22 | }
23 |
24 | // if no text is entered on exit, replace default text
25 | field.onblur = function() {
26 | if (this.value == "") {
27 | this.value = defaulttext;
28 | }
29 | }
30 | },
31 |
32 |
33 | /**
34 | * functions to select or deselect all checkboxes
35 | * @param parentcheckbox string the id of the parent check box that toggles the rest
36 | * @param childboxcontainer string the id of the html container for all child checkboxes
37 | */
38 | toggleCheckboxes : function (parentcheckbox, childboxcontainer) {
39 |
40 | // detect when the parent checkbox value is changed
41 | var parentCheckbox = document.getElementById(parentcheckbox);
42 | parentCheckbox.onclick = function() {
43 | switchfields(this.checked);
44 | }
45 |
46 | //get child checkboxes
47 | var container = document.getElementById(childboxcontainer);
48 | var childCheckboxes = container.getElementsByTagName('input');
49 |
50 | // traverse and check
51 | function switchfields(checkOnOff) {
52 | for (var i=0; i < childCheckboxes.length; i++) {
53 | childCheckboxes[i].checked = checkOnOff;
54 | }
55 | }
56 | }
57 | }
--------------------------------------------------------------------------------