> > Ben Sgro (ProjectSkyline) wrote: > >> Hello, > >> Yeah, I just hacked up this: > >> . "<input type=\"text\" value=\"Username\" > onfocus=\"this.value=''\">" > >> . "<input type=\"text\" value=\"Password\" > >> onfocus=\"this.value=''\" onfocus=\"this.type='password'\">" > >> What im trying to do is turn that type to a password..so > I can see the > >> text...is that possible. > >> - Ben > >>
I had to do something similar for a recent project. My clients asked for a 'show' link instead of an onFocus. Also had cross-browser considerations. (for noscript, could use js to hide labels) defaultValue is very nice, and I'm glad to have learned it (thanks Andy). Unfortunately changing the defaultValue changed the value. In order to replace the old password field with a new text field, you have to set the new field's defaultValue to 'Password', which makes the value of the field 'Password', which means you lose whatever the user may have typed in. So, you'll notice I use _defaultValue (my own) to tell the script which value to replace if it sees it. Also note, when using defaultValue, if you load the page with the user's info already filled in (a likely scenario for an account management page), the defaultValue will no longer be 'Username', which might be what you want (a clear field regardless of what they're typing), but would probably be unexpected. Of course in the account management context, not having labels on fields is a bit less user-friendly, but that's off-topic. getTarget is just from my standard toolbox, and replaceElement is from prototype (and a bit of research as to how prototype's methods work). Everything that's in the head would probably be in a separate file and the stuff at the bottom probably in a window.onload (even better http://tetlaw.id.au/view/javascript/fastinit) Here's what I have: <html> <head> <script language="javascript"> var getTarget = function (element) { if (window.event !== undefined) { return window.event.srcElement; } return element.target; }; // from prototype - mixture of Element.Methods.replace and Insertion.Before var replaceElement = function(oElement, sHtml) { sId = oElement.id; if (oElement.outerHTML) { oElement.outerHTML = sHtml; } else { var range = oElement.ownerDocument.createRange(); range.setStartBefore(oElement); oElement.parentNode.replaceChild(range.createContextualFragment(sHtml), oElement); } return document.getElementById(sId); }; var setType = function(id, sType) { var oField = document.getElementById(id); return replaceElement(oField, '<input type="' + sType + '" name="' + oField.name + '" id="' + oField.id + '" value="' + oField.value + '" />'); }; var clearField = function(action) { oField = getTarget(action); if (oField.value == oField._defaultValue) { oField.value = ''; } }; var defaultField = function(action) { oField = getTarget(action); if (oField.value == '') { oField.value = oField._defaultValue; } }; var initField = function(id, defaultValue) { var oField = document.getElementById(id); oField._defaultValue = defaultValue; oField.onfocus = clearField; oField.onblur = defaultField; }; var showPassword = function(action) { var oLink = getTarget(action); oLink.onclick = hidePassword; oLink.innerHTML = 'hide'; setType('field_password' , 'text'); initField('field_password', 'Password'); return false; }; var hidePassword = function(action) { var oLink = getTarget(action); oLink.onclick = showPassword; oLink.innerHTML = 'show'; setType('field_password', 'password'); initField('field_password', 'Password'); return false; }; </script> </head> <body> <input type="text" name="username" id="field_username" value="enobrev" /> <input type="password" name="password" id="field_password" value="enobrev" /> <a href="show" id="showPass">show</a> <script language="javascript"> initField('field_username', 'Username'); initField('field_password', 'Password'); document.getElementById('showPass').onclick = showPassword; </script> </body> </html> Anyways, good luck, hope this helps anyone who needs it. (also, not sure if you know, but nyphp has a front-end list for js questions as well - http://lists.nyphp.org/mailman/listinfo/front-end). Mark Armendariz _______________________________________________ New York PHP Community Talk Mailing List http://lists.nyphp.org/mailman/listinfo/talk NYPHPCon 2006 Presentations Online http://www.nyphpcon.com Show Your Participation in New York PHP http://www.nyphp.org/show_participation.php
