[jQuery] Re: password initial value without masking "****"
Hi, another thing you can try is to use a label for the password input. Just
change the label styles to go on top of the input field ( it will look like
it is in the field.) Then when the input field has focus, hide the label so
it doesn't block the field. I just saw Waseem has the same idea. Actually
in 'Learning jQuery 1.3', Karl shows how to do this in detail.DED
On Tue, Oct 20, 2009 at 3:05 AM, Marco Barbosa 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
> 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 >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(' > > 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 css
> >
> > >>
> > >>/*first we need to hide the password input*/
> > >>.passinput {
> > >>display:none;
> > >>}
> > >>
> >
> > >> the js
> >
> > >>
> > >>$(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();
> > >>});
> > >>});
> > >>
> >
> > >> On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa <
> marco.barbos...@gmail.com > >> 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 > >>> 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'
> > >>>
[jQuery] Re: password initial value without masking "****"
strangest thing though - to get around faults like these. i coded my own
jquery select box...as its made of div tags you can;t give it a name
attribute. but you can still send the value through ajax or a query string.
On Tue, Oct 20, 2009 at 7:49 PM, waseem sabjee wrote:
> I am experimenting around with other ways.the bad part about this is the a
> browser will not allow you to change the type attribute - u suppose thats
> for security purposes.
> but ye - may be an absolutely positioned element over the text box can help
> if you can get the z-indexing right to support IE.
>
>
> On Tue, Oct 20, 2009 at 6:58 PM, Marco Barbosa
> wrote:
>
>>
>> You were right Waseem.
>> Specially after Bi Jing confirmed. I think that is the best way.
>>
>> If it doesn't work I wil go for background like Rupak suggested.
>>
>> Thank you all for your help!
>>
>> On Oct 20, 1:55 pm, rupak mandal wrote:
>> > either you ca maintain two input element (like facebook), or make an
>> image
>> > of "password"and set the image to textbox background, on focus or click
>> > just remove the background-image.
>> >
>> >
>> >
>> > On Tue, Oct 20, 2009 at 2:09 PM, Bi Jing wrote:
>> > > For now, our project use two input elements to implement this, we
>> still can
>> > > not get easier way.
>> > > Actually, not only password, but also text element, you need two
>> inputs,
>> > > one hidden one shown.
>> >
>> > > Becoder.
>> >
>> > > On Tue, Oct 20, 2009 at 4:08 PM, waseem sabjee <
>> waseemsab...@gmail.com>wrote:
>> >
>> > >> 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
>> > >>> 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('> 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 css
>> >
>> > >>> > >>
>> > >>> > >>/*first we need to hide the password input*/
>> > >>> > >>.passinput {
>> > >>> > >>display:none;
>> > >>> > >>}
>> > >>> > >>
>> >
>> > >>> > >> the js
>> >
>> > >>> > >>
>> > >>> > >>$(function() {
>> > >>> > >>// declare your input types
>> > >>> > >>var textinput = $(".textinput");
>> > >>> > >>var passinput = $(".passinput");
>> > >>> > >>// on text input focus - hide
[jQuery] Re: password initial value without masking "****"
I am experimenting around with other ways.the bad part about this is the a
browser will not allow you to change the type attribute - u suppose thats
for security purposes.
but ye - may be an absolutely positioned element over the text box can help
if you can get the z-indexing right to support IE.
On Tue, Oct 20, 2009 at 6:58 PM, Marco Barbosa wrote:
>
> You were right Waseem.
> Specially after Bi Jing confirmed. I think that is the best way.
>
> If it doesn't work I wil go for background like Rupak suggested.
>
> Thank you all for your help!
>
> On Oct 20, 1:55 pm, rupak mandal wrote:
> > either you ca maintain two input element (like facebook), or make an
> image
> > of "password"and set the image to textbox background, on focus or click
> > just remove the background-image.
> >
> >
> >
> > On Tue, Oct 20, 2009 at 2:09 PM, Bi Jing wrote:
> > > For now, our project use two input elements to implement this, we still
> can
> > > not get easier way.
> > > Actually, not only password, but also text element, you need two
> inputs,
> > > one hidden one shown.
> >
> > > Becoder.
> >
> > > On Tue, Oct 20, 2009 at 4:08 PM, waseem sabjee >wrote:
> >
> > >> 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
> > >>> 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(' 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 css
> >
> > >>> > >>
> > >>> > >>/*first we need to hide the password input*/
> > >>> > >>.passinput {
> > >>> > >>display:none;
> > >>> > >>}
> > >>> > >>
> >
> > >>> > >> the js
> >
> > >>> > >>
> > >>> > >>$(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
> >
[jQuery] Re: password initial value without masking "****"
You were right Waseem.
Specially after Bi Jing confirmed. I think that is the best way.
If it doesn't work I wil go for background like Rupak suggested.
Thank you all for your help!
On Oct 20, 1:55 pm, rupak mandal wrote:
> either you ca maintain two input element (like facebook), or make an image
> of "password"and set the image to textbox background, on focus or click
> just remove the background-image.
>
>
>
> On Tue, Oct 20, 2009 at 2:09 PM, Bi Jing wrote:
> > For now, our project use two input elements to implement this, we still can
> > not get easier way.
> > Actually, not only password, but also text element, you need two inputs,
> > one hidden one shown.
>
> > Becoder.
>
> > On Tue, Oct 20, 2009 at 4:08 PM, waseem sabjee
> > wrote:
>
> >> 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
> >>> 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 >>> >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(' >>> > > 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 css
>
> >>> > >>
> >>> > >> /* first we need to hide the password input*/
> >>> > >> .passinput {
> >>> > >> display:none;
> >>> > >> }
> >>> > >>
>
> >>> > >> the js
>
> >>> > >>
> >>> > >> $(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();
> >>> > >> });
> >>> > >> });
> >>> > >>
>
> >>> > >> On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa <
> >>> marco.barbos...@gmail.com >>> > >> marco.barbos...@gmail.com>> wrote:
>
> >>> > >> Hi waseem!
>
> >>> > >> Thanks for your reply.
>
> >>> > >> Something's wrong with this line:
> >>> > >> $("#password").attr({type:'text'});
>
> >>> > >> I
[jQuery] Re: password initial value without masking "****"
either you ca maintain two input element (like facebook), or make an image
of "password"and set the image to textbox background, on focus or click
just remove the background-image.
On Tue, Oct 20, 2009 at 2:09 PM, Bi Jing wrote:
> For now, our project use two input elements to implement this, we still can
> not get easier way.
> Actually, not only password, but also text element, you need two inputs,
> one hidden one shown.
>
>
> Becoder.
>
> On Tue, Oct 20, 2009 at 4:08 PM, waseem sabjee wrote:
>
>> 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
>>> 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 >> >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('>> > > 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 css
>>> >
>>> > >>
>>> > >>/*first we need to hide the password input*/
>>> > >>.passinput {
>>> > >>display:none;
>>> > >>}
>>> > >>
>>> >
>>> > >> the js
>>> >
>>> > >>
>>> > >>$(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();
>>> > >>});
>>> > >>});
>>> > >>
>>> >
>>> > >> On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa <
>>> marco.barbos...@gmail.com>> > >> 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 :)
>>> >
>>> >
[jQuery] Re: password initial value without masking "****"
For now, our project use two input elements to implement this, we still can
not get easier way.
Actually, not only password, but also text element, you need two inputs, one
hidden one shown.
Becoder.
On Tue, Oct 20, 2009 at 4:08 PM, waseem sabjee wrote:
> 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 > 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
>> 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 > >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('> > > 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 css
>> >
>> > >>
>> > >>/*first we need to hide the password input*/
>> > >>.passinput {
>> > >>display:none;
>> > >>}
>> > >>
>> >
>> > >> the js
>> >
>> > >>
>> > >>$(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();
>> > >>});
>> > >>});
>> > >>
>> >
>> > >> On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa <
>> marco.barbos...@gmail.com> > >> 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 > > >>> wrote:
>> > >>> // set the initial type to text
>> > >>> $(".mypasswordfield").attr({
>> > >>> type:'text'
>> >
>> > >>> });
>> >
>> > >>> // on user focus - chan
[jQuery] Re: password initial value without masking "****"
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
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
> 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 >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(' > > 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 css
> >
> > >>
> > >>/*first we need to hide the password input*/
> > >>.passinput {
> > >>display:none;
> > >>}
> > >>
> >
> > >> the js
> >
> > >>
> > >>$(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();
> > >>});
> > >>});
> > >>
> >
> > >> On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa <
> marco.barbos...@gmail.com > >> 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 > >>> 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
[jQuery] Re: password initial value without masking "****"
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
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 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(' > 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 css
>
> >>
> >> /* first we need to hide the password input*/
> >> .passinput {
> >> display:none;
> >> }
> >>
>
> >> the js
>
> >>
> >> $(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();
> >> });
> >> });
> >>
>
> >> On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa
> >> >> 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 >> > 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
> >> > 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 functio
[jQuery] Re: password initial value without masking "****"
Instead of replacing the input, display a label above it. See
http://wiki.jqueryui.com/Watermark
Jörn
On Mon, Oct 19, 2009 at 4:17 PM, Liam Potter 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(' 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 css
>>
>>
>>/*first we need to hide the password input*/
>>.passinput {
>>display:none;
>>}
>>
>>
>> the js
>>
>>
>>$(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();
>>});
>>});
>>
>>
>> On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa
>> > 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 >> 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
>>> 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"
>>> > i
[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('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 css /*first we need to hide the password input*/ .passinput { display:none; } the js $(function() { // declare your input types var textinput = $(".textinput"); var passinput = $(".passinput");// on text input focus - hide text input and show and focus on password inputtextinput.focus() { textinput.blur(); textinput.hide(); passinput.show(); passinput.focus(); });// on password input blud hide password input and show and focus on text inputpassinput.blur(function() { passinput.blur(); passinput.hide(); textinput.show(); textinput.focus(); }); }); On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa 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 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 > 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. > >
[jQuery] Re: password initial value without masking "****"
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 css
/*first we need to hide the password input*/
.passinput {
display:none;
}
the js
$(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();
});
});
On Mon, Oct 19, 2009 at 2:51 PM, Marco Barbosa 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 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
> > 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?
>
[jQuery] Re: password initial value without masking "****"
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 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
> 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?
[jQuery] Re: password initial value without masking "****"
// 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
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?
>
