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 <beco...@gmail.com> 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 <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?
>>>
>>
>>
>
