input box...onkeypress etc

[jimfog]

I have an input box-it is a search field to be more precise. I have used the onfocus event such that when the user clicks inside the box, it gets a value. Now I want, upon the user beginning to type, the value inside the box to become an empty string, here is somecode to get an idea what I am talking about: The HTML:

<form action="results.php" method="post"> 		    <input name="search" type="text" style="color:#666666;"				   onkeypress="searchfield_keypres(this)" onfocus="searchfield_focus(this)" onblur="searchfield_blur(this)" size="41" value="find..." />		   <button id="searchbutton" type="button">search</button>			    </form>

Nothing is wrong so far.The problem begins when using the onkepress event.I can only type ONE letter. The above does not surprise me though. How am I going to fix it? In short:1.The input/search box has a value.2. ON keypress I want this value substituted by the search query of the user Here is the keypress js function:

function searchfield_keypres(obj){    obj.value=""   }

In other words the obj.value above must reflect the search query of the user.

[dsonesuk]

???? why! the value of the search query can be retrieved when the user clicks the button, or the presses the enter key, by using onsubmit on the form element, why retrieve the value on every keypress the user makes. you usually test to see if the user has entered a value other than default value or empty value with code similar to

function searchfield_focus(elem)    {      if(elem.value == elem.defaultValue)          {        elem.value="";        }    }function searchfield_blur(elem)    {      if(elem.value == "")          {        elem.value= elem.defaultValue;        }    }

if the user enters a value other than the default, or empty it will show that value instead, if the user empties the value it will return back to default.

[Ingolme]

Google retrieves the value on every key press.

[jimfog]

???? why! the value of the search query can be retrieved when the user clicks the button, or the presses the enter key, by using onsubmit on the form element, why retrieve the value on every keypress the user makes. you usually test to see if the user has entered a value other than default value or empty value with code similar to

function searchfield_focus(elem)	{	  if(elem.value == elem.defaultValue)		  {		elem.value="";		}	} function searchfield_blur(elem)	{	  if(elem.value == "")		  {		elem.value= elem.defaultValue;		}	}

if the user enters a value other than the default, or empty it will show that value instead, if the user empties the value it will return back to default.

To be more precise, I am going to use an example to demonstrate how my search box I want to behave-and this example is facebook and the search field that appear on top of the page and in it you will find the value "search for people...etc". So far I have managed, when the user focus, to make the color of the letters change.and now I am in the step where the user has to type a search query. Here are the functions that demonstrate what I have achieved so far:

function searchfield_focus(obj){obj.style.color=""obj.style.fontStyle=""if (obj.value=="search..."){obj.style.color="#999999"	    obj.value="search..."}     }function searchfield_blur(obj){   obj.style.color=""obj.style.fontStyle=""if (obj.value=="search..."){obj.style.color="#666666"	    obj.value="search..."} }

I hope a was clear.

[jimfog]

It seems that the placeholder attribute is what I need for.

[dsonesuk]

I did one method of copying live input into another element, but i used onkeyup, this waits for the user to actually enter the value so when the function runs on keyup the whole input value is retrieved.

function addAdminNotes(elem){document.getElementById("box_admin_notes").innerHTML = elem.value;}

[jimfog]

Οκ...but what I am trying to achieve is something different.It is simple though. I want, when the user focus on the search field the color of the placeholder text to change-like facebook searchfield.So far, I have styled the placeholder text color with css(::-webkit-input-placeholder).

[dsonesuk]

you don't require javascript to change input text colour, thats what :focus can be used for, although it won't work for IE7 and below.

 input[name=search] {color:#666;}input[name=search]:focus {color:#999;}

[jimfog]

I am talking about the color of the placeholder text and NOT of the text being typed. Currently I have this CSS:

::-webkit-input-placeholder { color:#666666;font-size: 12px;}input[type=text]{width: 297px;padding: 5px;outline: none;border: 1px solid #999999;border-radius: 3px;}

Although I think the second declaration is not needed for the topic I included any way. As you see, current placeholder text color is #666666 and I want this, on focus to get a different value.

[dsonesuk]

ok if you want to take that route, heres the other browser specific code except for ie9 and below of course.

::-webkit-input-placeholder { color:red;font-size: 12px;}:-moz-placeholder { color:red;font-size: 12px;}:-ms-input-placeholder  { color:red;font-size: 12px;}

[jimfog]

I want the placeholder text color change ONFOCUS-go see Facebook, the search field on top of the page.

[dsonesuk]

NO! the color of the input is set as default from the body css #999999, the placeholder is set as a different color FOR THE PLACEHOLDER ONLY! as #333333, when the input gains focus it shows default (as set by body) clear now. IF you want it to be a different color from the color set by the body, set the default color: for that specific input using my method in post #8 (top)

Edited September 5, 2012 by dsonesuk

[jimfog]

It is clear, but it does not work, here is some code, which according to you will do the job and tell meif you find anything wrong at it:

body{margin: 0 0px;font-family: georgia;color: #999999;font-size: 12px;background-color: #e1e1e1;}::-webkit-input-placeholder { color:#333333;font-size: 12px;}

According to what you are saying the above should work.

[jimfog]

Just noticed that the effect I want to achieve appear only in Chrome. in FF and IE, the placeholder text, onfocus, dissapears.

[dsonesuk]

In ALL browsers including chrome, but! not crappy IE below 10 i think (believe :-ms-input-placeholder works for IE10, can't test as I do not have, or do not want IE10 crap polluting my pc) works where the placeholder colour is defined by placeholder selector color, ALL when focused upon will force the placeholder text to disappear, any text entered into the input reverts to the colour define by parent (in fb case body), or defined to the input itself in ALL browsers.