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 <waseemsab...@gmail.com>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
> <marco.barbos...@gmail.com>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 <rupakn...@gmail.com> 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 <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?
>>
>
>
