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