0

I would like most of my text boxes in my web application to display a hint to minimise clutter on the screen.

I have come across many solutions but all of them seem so complicated for what I want. It may be worth pointing out now that my Javascript knowledge is quite poor.

All I need is a simple script that will allow me to have text box hints (with a CSS style so I can make it greyed out and italic) and that will work with a password field.

I did have a script but it only allowed me to have one password field per page and it wasn't very easy to use everywhere.

Thank you, your help is greatly appreciated.

EDIT: This also needs to be compatible with IE6 unfortunately.

joshkrz
  • 499
  • 3
  • 7
  • 25
  • 1
    sorry but you won't find people willing to google some piece of code for you. there are plenty of code blogs that targets exactly this problem.please google around a bit – Moataz Elmasry Jul 15 '12 at 13:08
  • The "hints" you're talking about are called **placeholders**. Using them as a substitute for separate field labels is considered a serious usability problem. – Pointy Jul 15 '12 at 13:10
  • @Pointy i don't think he's asking us to remove field labels...he's only asking us to provide hints as to what should go in the field if the label is not self-explanatory. – AdityaSaxena Jul 15 '12 at 13:14
  • @Mostaz I have googled around and all I find is JQuery soloutions that appear to be very complicated and code that is hard to integrate. Because I know little about Javascript I need some clarification "IF" there is a simpler way that better suits my needs. – joshkrz Jul 15 '12 at 13:16
  • @AdityaSaxena Perhaps you're right; I took my cue from the "minimise clutter" phrase. – Pointy Jul 15 '12 at 13:46

1 Answers1

2

The safest way would probably be to create two password boxes for instance and the one with text in you do as following: 

<input style="color:#B0AEAE;width:167px;display:none;" id="password_text" type="text" value="Password" />
<input type="password" id="password_password" name="password" style="width:167px" maxlength="20"/>

Then you first hide the "normal" password input field with (I use) jquery and display the hidden password field and you can on click go back to the other one like this:

$(document).ready(function() {

$('#password_text').show();
$('#password_password').hide();

$('#password_text').focus(function() {
    $('#password_text').hide();
    $('#password_password').show();
    $('#password_password').focus();
});
    $('#password_password').blur(function() {
    var password = $(this).val();
    if(password == '') {
        $('#password_password').hide(); 
        $('#password_text').show();
    }
});

});

Just put this at the top:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
NewInTheBusiness
  • 1,465
  • 1
  • 9
  • 14