Cum punem o valoare initiala unui textfield

Un artificiu foarte util atunci cand construiesti un formular HTML e sa il faci sa aiba o valoare initiala, iar dupa ce dai click pe el, aceasta valoare sa dispara (si sa reapara daca nu completexi campul). Poti vedea un  exemplu functional in sectiunea de comentarii de sub articol; atunci cand dai click in campul de comentariu, textul “Type your comment here…” dispare, iar daca nu o sa scrii nimic, o sa reapara.

Mai jos este un exemplu folosit pentru un textfield al unui newsletter, dar se poate utiliza si in cazul unui textarea de exemplu. Practic parametrul value ii da valoarea intiala, eventul onfocus stergem textul, iar in onblur rescriem textul initial. Simplu si util.

<input type="text" class="subscribe_input"
value="Enter Email To Get Updates" size="37"
onclick="this.value='';" onfocus="this.select()"
onblur="this.value=!this.value?'Enter Email To Get Updates':this.value;"/>

Pe aceeasi tema...

Lasa un comentariu

PHVsPjxsaT48c3Ryb25nPndvb19hYm91dF9iaW88L3N0cm9uZz4gLSBXZWIgcHJvZ3JhbW1lciwgdHJhdmVsZXIsIGRvZyBsb3ZlciwgbGl2aW5nIHRoZSBkcmVhbS4gPC9saT48bGk+PHN0cm9uZz53b29fYWJvdXRfZ3JhdmF0YXI8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19hYm91dF9yZWFkbW9yZTwvc3Ryb25nPiAtIGh0dHA6Ly93d3cucmFkaG9vLmNvbS9kZXNwcmUtbWluZTwvbGk+PGxpPjxzdHJvbmc+d29vX2Fkc19yb3RhdGU8L3N0cm9uZz4gLSB0cnVlPC9saT48bGk+PHN0cm9uZz53b29fYWRfYmxvY2tfYWRzZW5zZTwvc3Ryb25nPiAtIDxzY3JpcHQgdHlwZT1cInRleHQvamF2YXNjcmlwdFwiPjwhLS0NCmdvb2dsZV9hZF9jbGllbnQgPSBcImNhLXB1Yi03NjY4ODUyNzg4MDUwMzA4XCI7DQovKiAzMDB4MjUwLCBjcmVhdGVkIDEyLzI3LzA5ICovDQpnb29nbGVfYWRfc2xvdCA9IFwiMTY2Nzc4Nzg2OVwiOw0KZ29vZ2xlX2FkX3dpZHRoID0gMzAwOw0KZ29vZ2xlX2FkX2hlaWdodCA9IDI1MDsNCi8vLS0+DQo8L3NjcmlwdD4NCjxzY3JpcHQgdHlwZT1cInRleHQvamF2YXNjcmlwdFwiDQpzcmM9XCJodHRwOi8vcGFnZWFkMi5nb29nbGVzeW5kaWNhdGlvbi5jb20vcGFnZWFkL3Nob3dfYWRzLmpzXCI+DQo8L3NjcmlwdD48L2xpPjxsaT48c3Ryb25nPndvb19hZF9ibG9ja19pbWFnZTwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbS9hZHMvd29vdGhlbWVzLTMwMHgyNTAtMS5naWY8L2xpPjxsaT48c3Ryb25nPndvb19hZF9ibG9ja191cmw8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hZF9jb250ZW50X2Fkc2Vuc2U8L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19hZF9jb250ZW50X2Rpc2FibGU8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2NvbnRlbnRfaW1hZ2U8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vYWRzL3dvb3RoZW1lcy00Njh4NjAtMi5naWY8L2xpPjxsaT48c3Ryb25nPndvb19hZF9jb250ZW50X3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2hlYWRlcl9hZHNlbnNlPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fYWRfaGVhZGVyX2ltYWdlPC9zdHJvbmc+IC0gaHR0cDovL3d3dy53b290aGVtZXMuY29tL2Fkcy93b290aGVtZXMtNDY4eDYwLTIuZ2lmPC9saT48bGk+PHN0cm9uZz53b29fYWRfaGVhZGVyX3VybDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzE8L3N0cm9uZz4gLSBodHRwOi8vZW52YXRvLnMzLmFtYXpvbmF3cy5jb20vcmVmZXJyZXJfYWR2ZXJ0cy90Zl8xMjV4MTI1X3Y1LmdpZjwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzI8L3N0cm9uZz4gLSBodHRwOi8vZW52YXRvLnMzLmFtYXpvbmF3cy5jb20vcmVmZXJyZXJfYWR2ZXJ0cy9hZF8xMjV4MTI1X3YyLmdpZjwvbGk+PGxpPjxzdHJvbmc+d29vX2FkX2ltYWdlXzM8L3N0cm9uZz4gLSBodHRwOi8vaW1nODUzLmltYWdlc2hhY2sudXMvaW1nODUzLzkyMTcvdGhlZGVhbHMuanBnPC9saT48bGk+PHN0cm9uZz53b29fYWRfaW1hZ2VfNDwvc3Ryb25nPiAtIGh0dHA6Ly9pbWc4NTMuaW1hZ2VzaGFjay51cy9pbWc4NTMvOTIxNy90aGVkZWFscy5qcGc8L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMTwvc3Ryb25nPiAtIGh0dHA6Ly90aGVtZWZvcmVzdC5uZXQ/cmVmPXBvcGVzY3VyYWRob288L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfMjwvc3Ryb25nPiAtIGh0dHA6Ly9hY3RpdmVkZW4ubmV0P3JlZj1wb3Blc2N1cmFkaG9vPC9saT48bGk+PHN0cm9uZz53b29fYWRfdXJsXzM8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb208L2xpPjxsaT48c3Ryb25nPndvb19hZF91cmxfNDwvc3Ryb25nPiAtIGh0dHA6Ly93d3cud29vdGhlbWVzLmNvbTwvbGk+PGxpPjxzdHJvbmc+d29vX2FsdF9zdHlsZXNoZWV0PC9zdHJvbmc+IC0gZGVmYXVsdC5jc3M8L2xpPjxsaT48c3Ryb25nPndvb19hdXRvX2ltZzwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fYmxvZ19zdWJuYXZpZ2F0aW9uPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jb250ZW50X2FyY2hpdmVzPC9zdHJvbmc+IC0gZmFsc2U8L2xpPjxsaT48c3Ryb25nPndvb19jdXN0b21fY3NzPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fY3VzdG9tX2Zhdmljb248L3N0cm9uZz4gLSA8L2xpPjxsaT48c3Ryb25nPndvb19leGNsdWRlX3BhZ2VzX2Zvb3Rlcjwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2V4Y2x1ZGVfcGFnZXNfbWFpbjwvc3Ryb25nPiAtIDwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlYXR1cmVkX2xheW91dDwvc3Ryb25nPiAtIHNtYWxsX3dpdGhfYWQucGhwPC9saT48bGk+PHN0cm9uZz53b29fZmVhdF9hbHRfaGVpZ2h0PC9zdHJvbmc+IC0gODU8L2xpPjxsaT48c3Ryb25nPndvb19mZWF0X2FsdF93aWR0aDwvc3Ryb25nPiAtIDEzMDwvbGk+PGxpPjxzdHJvbmc+d29vX2ZlZWRidXJuZXJfdXJsPC9zdHJvbmc+IC0gPC9saT48bGk+PHN0cm9uZz53b29fZ29vZ2xlX2FuYWx5dGljczwvc3Ryb25nPiAtIDwhLS0gU3RhcnQgb2YgU3RhdENvdW50ZXIgQ29kZSBmb3IgRGVmYXVsdCBHdWlkZSAtLT4NCjxzY3JpcHQgdHlwZT1cInRleHQvamF2YXNjcmlwdFwiPg0KdmFyIHNjX3Byb2plY3Q9NTI5ODA2MjsgDQp2YXIgc2NfaW52aXNpYmxlPTE7IA0KdmFyIHNjX3NlY3VyaXR5PVwiOWFiNjIzMGVcIjsgDQo8L3NjcmlwdD4NCjxzY3JpcHQgdHlwZT1cInRleHQvamF2YXNjcmlwdFwiDQpzcmM9XCJodHRwOi8vd3d3LnN0YXRjb3VudGVyLmNvbS9jb3VudGVyL2NvdW50ZXIuanNcIj48L3NjcmlwdD4NCjxub3NjcmlwdD48ZGl2IGNsYXNzPVwic3RhdGNvdW50ZXJcIj48YSB0aXRsZT1cImN1c3RvbQ0KY291bnRlclwiIGhyZWY9XCJodHRwOi8vc3RhdGNvdW50ZXIuY29tL2ZyZWUtaGl0LWNvdW50ZXIvXCINCnRhcmdldD1cIl9ibGFua1wiPjxpbWcgY2xhc3M9XCJzdGF0Y291bnRlclwiDQpzcmM9XCJodHRwOi8vYy5zdGF0Y291bnRlci5jb20vNTI5ODA2Mi8wLzlhYjYyMzBlLzEvXCINCmFsdD1cImN1c3RvbSBjb3VudGVyXCI+PC9hPjwvZGl2Pjwvbm9zY3JpcHQ+DQo8IS0tIEVuZCBvZiBTdGF0Q291bnRlciBDb2RlIGZvciBEZWZhdWx0IEd1aWRlIC0tPjwvbGk+PGxpPjxzdHJvbmc+d29vX2hlYWRlcl9sYXlvdXQ8L3N0cm9uZz4gLSBhYm91dC5waHA8L2xpPjxsaT48c3Ryb25nPndvb19pbWFnZV9oZWlnaHQ8L3N0cm9uZz4gLSAxNzA8L2xpPjxsaT48c3Ryb25nPndvb19pbWFnZV9zaW5nbGU8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX2ltYWdlX3dpZHRoPC9zdHJvbmc+IC0gNDMwPC9saT48bGk+PHN0cm9uZz53b29fbG9nbzwvc3Ryb25nPiAtIGh0dHA6Ly93d3cucmFkaG9vLmNvbS93cC1jb250ZW50L3RoZW1lcy9ibG9nZ2luZ3N0cmVhbS9pbWcvbG9nby5wbmc8L2xpPjxsaT48c3Ryb25nPndvb19tYW51YWw8L3N0cm9uZz4gLSBodHRwOi8vd3d3Lndvb3RoZW1lcy5jb20vc3VwcG9ydC90aGVtZS1kb2N1bWVudGF0aW9uL2Jsb2dnaW5nc3RyZWFtLzwvbGk+PGxpPjxzdHJvbmc+d29vX3JlbGF0ZWQ8L3N0cm9uZz4gLSBmYWxzZTwvbGk+PGxpPjxzdHJvbmc+d29vX3Jlc2l6ZTwvc3Ryb25nPiAtIGZhbHNlPC9saT48bGk+PHN0cm9uZz53b29fc2hvcnRuYW1lPC9zdHJvbmc+IC0gd29vPC9saT48bGk+PHN0cm9uZz53b29fc2luZ2xlX2hlaWdodDwvc3Ryb25nPiAtIDEyMDwvbGk+PGxpPjxzdHJvbmc+d29vX3NpbmdsZV93aWR0aDwvc3Ryb25nPiAtIDE4MDwvbGk+PGxpPjxzdHJvbmc+d29vX3RoZW1lbmFtZTwvc3Ryb25nPiAtIEJsb2dnaW5nc3RyZWFtPC9saT48bGk+PHN0cm9uZz53b29fdGh1bWJfaGVpZ2h0PC9zdHJvbmc+IC0gNjQ8L2xpPjxsaT48c3Ryb25nPndvb190aHVtYl93aWR0aDwvc3Ryb25nPiAtIDY0PC9saT48bGk+PHN0cm9uZz53b29fdXBsb2Fkczwvc3Ryb25nPiAtIGE6Mjp7aTowO3M6NTk6Imh0dHA6Ly93d3cucmFkdXBvcGVzY3Uucm8vd3AtY29udGVudC93b29fdXBsb2Fkcy80LWxvZ28ucG5nIjtpOjE7czo1OToiaHR0cDovL3d3dy5yYWR1cG9wZXNjdS5yby93cC1jb250ZW50L3dvb191cGxvYWRzLzMtbG9nby5wbmciO308L2xpPjwvdWw+