Toggle password field type

Rails
1

I want to have a text field that displays some text, but when the person
clicks that text field that text disapears but also, I want to switch
the type to a “password” field. I can do something close with straight
forward html:

It clears the text but does not change the type. I would like to use a
helper to do this and so far I have:

<%= text_field ‘user’, ‘password’, :size => 30, :onfocus =>
“this.value=’’;this.type=‘password’” %>

Can I do some kind of rjs helper to toggle the type? And is this even
possible? I realise that this is more of html question, but I would
rather use the helpers to get this done. Thanks all, and have a great
weekend,

–Shandy

2

On 9/28/07, Shandy N. [email protected] wrote:

It clears the text but does not change the type. I would like to use a
helper to do this and so far I have:

<%= text_field ‘user’, ‘password’, :size => 30, :onfocus =>
“this.value=‘’;this.type=‘password’” %>

I plugged the above verbatim into a test page and it worked fine –
the entered text was obscured (*****) as I’d expect.

Are you seeing any errors in the console?

–
Hassan S. ------------------------ [email protected]

3

Hassan S. wrote:

I plugged the above verbatim into a test page and it worked fine –
the entered text was obscured (*****) as I’d expect.

Are you seeing any errors in the console?

–
Hassan S. ------------------------ [email protected]

Nope doesn’t work. what happens is that the text ‘Password is case
sensitive’ appears in the text box, then, as you click inside the text
box that text disapearse, which is what I want, but the text that is
entered after that is plain text, not ‘***’ as I would like in a
password field. Here is a modified version of the helper:

<%= text_field ‘user’, ‘password’, :size => 30, :value => ‘Password Case
Sensitive’, :onfocus => “this.value=’’;this.type=‘password’” %>

4

I see, this doesn’t work at all in IE, somewhat in Opera, and perfectly
in FireFox (as usual). Anyway to get this to work in IE and FireFix??/

5

Shandy N. wrote:

Alright, I got it! It’s totally a JavaScript solution and not a rails
solution but it works across FireFox and IE at least. Apperently only
IE7 allows the above examples to work correctly. So here it goes:

I ran into this a few weeks back. The Type attribute is protected under
IE once an element has been placed into the DOM. You can get around this
by creating a new password element using basic DOM methods:

o = document.getElementById(‘OLD_TEXT_ELEMENT_ID’)
d = document.createElement(‘INPUT’);
d.setAttribute(‘type’,‘password’);
d.value = o.value;
o.parentNode.replaceChild(a, o);

Ref: http://www.thescripts.com/forum/post2804831-3.html

6

Alright, I got it! It’s totally a JavaScript solution and not a rails
solution but it works across FireFox and IE at least. Apperently only
IE7 allows the above examples to work correctly. So here it goes:

  1. My HTML looks like:


  1. and my javaScript looks like:

function switchTo(num)
{

if (num){

  document.getElementById('password_text').style.display="none";

  document.getElementById('password').style.display="inline";

        document.getElementById('password').value="";

  document.getElementById('password').focus();

} else {

       document.getElementById('password').style.display="none";

document.getElementById(‘passwordtext’).style.display=“inline”;

}
}

I am not yet well versed in RJS files but would there be a ruby way to
do this? Thanks,

-Shandy

7

On 10/1/07, Shandy N. [email protected] wrote:

Alright, I got it! It’s totally a JavaScript solution and not a rails
solution but it works across FireFox and IE at least. Apperently only
IE7 allows the above examples to work correctly. So here it goes:

Wait a sec, what? I used your original example verbatim and it
worked fine with FireFox 2.0/Linux.

Regardless, doing this requires JavaScript, since it happens in
the client browser.

BTW, you could get away from duplicating fields in your markup
with something like this:

<%= text_field ‘user’, ‘pwd’,
{ :value => ‘do something here’,
:size => 30, :onfocus => “swap_field_type(this)” } %>

function swap_field_type(field)
{
var parent = field.parentNode;
var replacement = document.createElement(‘input’);
replacement.type = ‘password’;
replacement.id = field.id;
replacement.name = field.name;
parent.replaceChild(replacement,field);
replacement.focus();
}

FWIW,

Hassan S. ------------------------ [email protected]