Win a copy of Beginning Java 17 Fundamentals: Object-Oriented Programming in Java 17 this week in the Java in General forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

Masking the content of textbox

 
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have to implement a javascript function which would mask the content of a textbox (just as in a password field) when the cursor is
outside of the textbox but display the content when the cursor is within the textbox.
Any pointer to where such problem is solved or approach to implement this would be greatly appreciated.

Is there any forum / community which is popular and entirely devoted to javascript?

Thanks in advance.
 
Author
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Why?
 
Sheriff
Posts: 9691
42
Android Google Web Toolkit Hibernate IntelliJ IDE Spring Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You can easily change the type of your input field with the onfocus and onblur events. So when the text field is focused, you set its type to 'text' and when the focus is lost (onblur) you can set its type to 'password' using javascript...
 
David Newton
Author
Posts: 12617
IntelliJ IDE Ruby
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
(That wouldn't actually do what the OP wants, though; you'd have to look at mouse in/out events.)
 
Sheriff
Posts: 67620
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
And Internet Explorer, always the life of the party, can be finicky about changing the type of an input element.

What might work better is to have two elements, one a text field, one a password field, whose visibility is toggled.

Seems like a really weird requirement though...
 
Moha Shaf
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
a requirement for secret question field.
 
Ranch Hand
Posts: 15304
6
Mac OS X IntelliJ IDE Chrome
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I actually see this feature on a lot of wireless router config and WEP auth. I believe even OSX has a "show characters" button that lets you unmask the password field with typing in your wireless access password.
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Well with non IE browsers, you can swap the type. With IE browsers you either needs to use a hidden field and swap/replace the text in the textbox OR you have to create and remove elements OR you need to show hide elements [password and plain textbox].

Eric
 
Moha Shaf
Ranch Hand
Posts: 30
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks everyone for the inputs.


I did something like below and it works:

<html>

<head>
<scrfieldt type="text/javascrfieldt">
var globalvariable;

function onBodyLoad()
{

globalvariable = document.getElementById('test').cloneNode(true);

}

function UnMask(field){

var NewField=globalvariable.cloneNode(true);

if( field.type == 'password')
{
NewField.type = 'text';
NewField.value = field.value;
field.parentNode.replaceChild(NewField,field);

}

}

function Mask(field){


var NewField=globalvariable.cloneNode(true);

if(NewField.type == 'text')
{

NewField.type='password';
NewField.value = field.value;

field.parentNode.replaceChild(NewField,field);

}


}

</scrfieldt>
</head>

<body onLoad="onBodyLoad()">


<input id="test" type="text" onBlur = "Mask(this);" onFocus = "Unmask(this);" >
<input id="test1" type="text" >
</body>
</html>



reply
    Bookmark Topic Watch Topic
  • New Topic