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