Css/Html文本框消失文本不起作用

我在做一個website。當你點擊我的搜索框時，文本會消失，就像它應該的那樣，但是一旦你點擊文本就不會回來，我希望它能夠。這裏是我的代碼段Css/Html文本框消失文本不起作用

<div class='search'> 
<form method="get" id='search' action="http://www.google.com/search"> 
<input type="hidden" name="q" size="31" maxlength="255" value="Site Name:" /> 
<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" value="Search..." onFocus="this.value=''" /> 
</div>

我有很多的CSS的背後，使文本框放大和改變顏色。這裏是代碼，以防萬一它是相關的。

#search input[type="text"] { 
background: url(imgs/search-white.png) no-repeat 10px 6px #444; 
border: 0 none; 
font: bold 12px Arial,Helvetica,Sans-serif; 
color: #d7d7d7; 
width:150px; 
padding: 6px 15px 6px 35px; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
border-radius: 20px; 
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-webkit-transition: all 0.7s ease 0s; 
-moz-transition: all 0.7s ease 0s; 
-o-transition: all 0.7s ease 0s; 
transition: all 0.7s ease 0s; 
outline: none; 
} 

#search input[type="text"]:focus { 
background: url(imgs/search-dark.png) no-repeat 10px 6px #fcfcfc; 
color: #6a6f75; 
width: 175px; 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
outline: none; 
} 
div.search 
{ 
position:fixed; 
top:8px; 
right:5px; 
}

當盒子被點擊框下放大和Search...文本消失喜歡它應該。但是，一旦你點擊文本不會返回，我希望它。我怎麼做？ *側面說明對不起，如果網站看起來壞的IM 13

來源

2013-02-09 Jacob Anthony Tonna

順便說一下，Java和Javascript是兩種*非常*不同的語言。你想要Javascript，網頁語言。 Java被用來製作* real *程序 - 這種類型是通過雙擊桌面上的圖標來運行的。（網絡程序員沒有冒犯） – MathSquared 2013-02-10 01:36:17

@ MathSquared11235謝謝你，我並不知道 – 2013-02-10 01:40:57

@ MathSquared11235 http://stackoverflow.com/questions/14793773/auto-google-search-results-on-my-website – 2013-02-10 01:48:26

變化：

<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" value="Search..." onFocus="this.value=''" />

爲：

<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" placeholder="Search..." onFocus="this.value=''" />

只需要改變的價值佔位:)

來源

2013-02-09 23:49:11

非常感謝你幫助了很多:) – 2013-02-09 23:51:31

其實，如果我是你，我會刪除'onFocus = ...'部分。佔位符完成這一切。 – 2013-02-09 23:52:04

不用擔心:) – 2013-02-09 23:52:06

如果你想它與舊版瀏覽器（不支持html5的瀏覽器）兼容，你可以這樣做：

function removePlaceholder(element) { 
     if (element.value == "Search...") { 
      element.value = ""; 
     } 
    } 

    function replacePlaceholder(element) { 
     if (element.value == "") { 
      element.value = "Search..."; 
     } 
    }

然後設置你的input標籤這樣的：

<input type="text" name="q" size="31" maxlength="255" style="height: 24px;" value="Search..." onBlur = "replacePlaceholder(this)" onFocus="removePlaceholder(this)" />

希望這有助於！

來源

2013-02-10 01:32:53 Stephen

http://stackoverflow.com/questions/14793773/auto-google-search-results-on-my-website是我需要幫助與我alredy得到這個工作:) ty tho – 2013-02-10 01:47:25

@ user1978141瞭解。唯一的不是所有的瀏覽器都支持佔位符標籤，所以這就是我回答這個問題的原因。 – Stephen 2013-02-10 06:52:57

好吧，解釋它 – 2013-02-10 07:04:52

Css/Html文本框消失文本不起作用

回答

相關問題