0

Why this basic script its not working? I already used this other times and it works and now its not working.

<form name="form1">
  <input type="search" placeholder="Search..." required="required" onfocus="if(this.value == 'Search...') {this.value=''}" onblur="if(this.value == ''){this.value ='Search...'}" /> 
  <button type="submit"><img src="search-icon-2.png" /></button>
</form>
jvperrin
  • 3,368
  • 1
  • 23
  • 33
andyB
  • 99
  • 2
  • 9
  • remove placeholder tag and it works fine – davethecoder Mar 02 '14 at 02:04
  • You are changing the value of the input, but you have a `placeholder` attribute. Either use your script, or use the `placeholder` tag. Either will work the same way, the caveat is merely a browser support issue. – Fillip Peyton Mar 02 '14 at 02:06

2 Answers2

0

You are checking for and changing the value property when you should be changing the placeholder property:

 <input type="search" placeholder="Search..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />

EDIT:

If you want a CSS-based solution for this problem, you can add these following rules in your CSS file:

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

Refer to this answer for other options: How do I auto-hide placeholder text upon focus using css or jquery?

Community
  • 1
  • 1
Saravana
  • 37,852
  • 18
  • 100
  • 108
  • Thank you, I have the habit to use the value so I even noticed I was doing wrong. – andyB Mar 02 '14 at 02:10
  • This answer is completely redundant to what the `placeholder` attribute is already doing. – Fillip Peyton Mar 02 '14 at 02:10
  • 1
    Why would you remove the placeholder … it has it already “build-in” _by definition_ that it doesn’t get displayed any more once the user starts typing or the field is not empty any more … – CBroe Mar 02 '14 at 02:11
  • No, in some browsers the placeholder text won't clear when you focus on the textbox. That is what the OP wants. – Saravana Mar 02 '14 at 02:12
  • No, in some browsers the `placeholder` doesn't work *period*: http://caniuse.com/input-placeholder – Fillip Peyton Mar 02 '14 at 02:32
  • I don't think you understood the OP's problem here. He wants the placeholder text to be cleared on focus, not when the user starts typing which is the default behavior of the `placeholder` attribute in Chrome and Firefox. I am not talking about browsers that don't support the attribute. – Saravana Mar 02 '14 at 02:36
0

You can remove onfocus and onblur as I tested and it worked fine on chrome browser. It was written in gray (as a hint text not ordinary text).

Amr Afifi
  • 88
  • 10