ok,why not absolutely position some text on a password box and hide that text on password box focus ?
On Tue, Oct 20, 2009 at 10:05 AM, Marco Barbosa <marco.barbos...@gmail.com>wrote: > > Hmmm. This is more complicated than I thought. > > waseem, having 2 input fields doesn't seem correct. Thought it might > work I will have to pass that solution for this specific site. > > Liam, Your code didn't work either, I don't know why. > > Jörn, this watermark plugin is interesting but I don't want to use > jquery ui on this site. > That's because I'm already using that cleanField function and it would > be redundant to have a plugin just for the login form. > Also I gave it a try and the label didn't stay inside the input. So If > i have to manually position it there, then it's another reason I will > pass this solution as well. > > I though a simple jquery would do this. > I think I will leave it masked and use a tooltip or something. > > Thanks guys! > > On Oct 19, 5:54 pm, Jörn Zaefferer <joern.zaeffe...@googlemail.com> > wrote: > > Instead of replacing the input, display a label above it. Seehttp:// > wiki.jqueryui.com/Watermark > > > > Jörn > > > > On Mon, Oct 19, 2009 at 4:17 PM, Liam Potter <radioactiv...@gmail.com > >wrote: > > > > > > > > > > > > > Here is how I do it. Just markup the form like normal (I use a > definition > > > list to lay out my forms) > > > > > $("input:password").each(function(){ > > > var $currentPass = $(this) > > > $currentPass.css({opacity:0}); > > > $currentPass.before('<input type="text" value="Password" > > > class="removeit" style="position:absolute;z-index:10;" />'); > > > var $visiblePassword = $(".removeit"); > > > $visiblePassword.focus(function () { > > > $(this).css({opacity:0}); > > > $currentPass.focus().css({opacity:1}); > > > }); > > > $currentPass.blur( function () { > > > if ( $currentPass.attr("value") == "" ){ > > > $currentPass.css({opacity:0}); > > > > $visiblePassword.css({opacity:1}).attr("value","Password"); > > > } > > > }); > > > }); > > > > > waseem sabjee wrote: > > > > >> ah yes i forgot. > > > > >> you would get access denied when tried to change an input type > property > > > > >> the best way is to have two input types and just hide one and show the > > >> other > > > > >> but i have a solution for you > > >> the html > > > > >> <!-- The following html of two input types - we gonna switch > > >> between them--> > > >> <input type="text" class="textinput" value="Passowrd" /> > > >> <input type="password" class="passinput" value="" /> > > > > >> the css > > > > >> <style type="text/css"> > > >> /* first we need to hide the password input*/ > > >> .passinput { > > >> display:none; > > >> } > > >> </style> > > > > >> the js > > > > >> <script type="text/javascript"> > > >> $(function() { > > >> // declare your input types > > >> var textinput = $(".textinput"); > > >> var passinput = $(".passinput"); > > >> // on text input focus - hide text input and show and > focus > > >> on password input > > >> textinput.focus() { > > >> textinput.blur(); > > >> textinput.hide(); > > >> passinput.show(); > > >> passinput.focus(); > > >> }); > > >> // on password input blud hide password input and show > and > > >> focus on text input > > >> passinput.blur(function() { > > >> passinput.blur(); > > >> passinput.hide(); > > >> textinput.show(); > > >> textinput.focus(); > > >> }); > > >> }); > > >> </script> > > > > >> On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa < > marco.barbos...@gmail.com<mailto: > > >> marco.barbos...@gmail.com>> wrote: > > > > >> Hi waseem! > > > > >> Thanks for your reply. > > > > >> Something's wrong with this line: > > >> $("#password").attr({type:'text'}); > > > > >> I tried changing to: > > >> $("#password").attr('type','text'}); > > > > >> but still no go. > > >> I have to comment out to get the other JS stuff on the site > working. > > > > >> The rest of the code seems Ok. What could it be? > > > > >> I like your solution, pretty simple :) > > > > >> I was wondering if we could put this inside the cleanField function > > >> but I guess it's not necessary. > > > > >> ~Marco > > > > >> On Oct 19, 2:32 pm, waseem sabjee <waseemsab...@gmail.com > > >> <mailto:waseemsab...@gmail.com>> wrote: > > >> > // set the initial type to text > > >> > $(".mypasswordfield").attr({ > > >> > type:'text' > > > > >> > }); > > > > >> > // on user focus - change type to password > > >> > $(".mypasswordfield").focus(function() { > > >> > $(".mypasswordfield").attr({ > > >> > type:'password' > > >> > }); > > > > >> > }); > > > > >> > // on user blur - change type to back to text > > >> > $(".mypasswordfield").blur(function() { > > >> > $(".mypasswordfield").attr({ > > >> > type:'text' > > >> > }); > > > > >> > }); > > > > >> > since text is an attribute we can change it. > > >> > all im doing is changing the type between password and text on > > >> click and on > > >> > blur > > >> > let me know if this worked for you :) > > > > >> > On Mon, Oct 19, 2009 at 11:21 AM, Marco Barbosa > > >> > <marco.barbos...@gmail.com <mailto:marco.barbos...@gmail.com > >>wrote: > > > > >> > > Hi! > > > > >> > > I'm trying to achieve something like the Facebook first page > (when > > >> > > you're not logged in). > > > > >> > > I'm using this simple function/plugin to clean the fields once > you > > >> > > click them: > > >> > > $.fn.cleanField = function() { > > >> > > return this.focus(function() { > > >> > > if( this.value == this.defaultValue ) { > > >> > > this.value = ""; > > >> > > } > > >> > > }).blur(function() { > > >> > > if( !this.value.length ) { > > >> > > this.value = this.defaultValue; > > >> > > } > > >> > > }); > > >> > > }; > > >> > > // clean the fields > > >> > > $("#login").cleanField(); > > >> > > $("#password").cleanField(); > > > > >> > > So If I click Login or Password, it will clean and the user > > >> can type > > >> > > the new value. > > >> > > It works good but there's a little usability problem here. > > > > >> > > I want to display the Password field like: "Your password here" > > >> > > instead of "***********" > > >> > > But when the user types his/her password, it has to go back to > > >> "****" > > > > >> > > So Initially it should be: "Your login" "Your Password" > > >> > > And when the user clicks and starts typing it goes: "My login" > > >> > > "*******" > > > > >> > > It's just the password field that masks the initial value by > > >> default. > > > > >> > > If you check Facebook they managed to do that somehow. > > > > >> > > Any ideas of how can I achieve this? >