[jQuery] Re: password initial value without masking "****"

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.barbosa84@gmail.com <mailto:marco.barbosa84@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?
>
>