NYCPHP Meetup

[Mark Armendariz]

> > 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