2

I have two things i want to do to this input text field.

<input type="text" value="email@abc.com" name="Email" id="Email"
 onblur="if (this.value == '') {this.value = 'email@abc.com';}"
 onfocus="if (this.value == 'email@abc.com') {this.value = '';}" />

The initial value is set to "email@abc.com" but i want to change the text color to a grey only if they have not typed in the text field.

I also have the problem of different browsers having dropdown menues of words the user has typed in other input fields on other websites. how can i clear the list the browser generates?

user1082764
  • 1,803
  • 8
  • 23
  • 37

3 Answers3

2

Regarding auto-population, have a look at How do you disable browser Autocomplete on web form field / input tag?

With regards to a "watermark", I would suggest (if you're not opposed to jQuery) placeholder plugin (However I'm sure there are a lot of options if you google "placeholder", "watermark" and "html" (or any combination thereof))

As an aside, I would keep the formatting in a set of <script> tags and leave the markup on its own. Markup should be markup; javascript should supplement that separately and not in-line with the tags)

Community
  • 1
  • 1
Brad Christie
  • 96,086
  • 15
  • 143
  • 191
1

The color can be changed in the event handlers you already have and calling this.style.color = "grey"; if you want a cross-browser solution, but HTML5 includes the placeholder attribute, but is not well supported at this time.

To stop the code from getting hard to read in the event handlers, I suggest putting event handlers in <script>.

<script>
    document.getElementById('Email').onblur = function() {
        if (this.value == '') {
            this.value = 'email@abc.com';
            this.style.color = "grey";
        }
        else {
            this.style.color = "black";
        }
    };
    // etc.
</script>

To stop autofill, use <input autocomplete="off" /> (StackOverflow Answer)

Community
  • 1
  • 1
Ryan Leonard
  • 958
  • 1
  • 8
  • 26
0
<input type="text" onblur="if(this.value==''){this.value='Enter your email address'};" onfocus="if(this.value=='Enter your email address'){this.value=''};" value="Enter your email address" size="10" alt="username" class="bt login_input" id="mod_login_username" name="username">

refer this website .

http://www.mrmachinery.com/

use firebug

zod
  • 11,159
  • 23
  • 64
  • 102
  • that did nothing i asked, it does not change the color and it does not prevent the browser from creating a dropdown list of previus input values. – user1082764 Jan 03 '12 at 20:58