2010-07-25 72 views
10

好吧,今天我正在做一個幫手HTML功能。它看起來像這樣:HTML輸入onfocus&onblur?

function Input($name,$type,$lable,$value= null){ 
    if (isset($value)) { 
    //if (this.value=='search') this.value = '' 
    echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" value="'.$value.'" onfocus="if (this.value==\''.$value.'\') this.value = \'\' "/>'; 
    } 
    if (!isset($value)) { 
    echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" />'; 
    } 
} 

正如你可以看到,如果插入值,它會做一些JavaScript這樣,當我點擊箱子,箱子裏面的文字會消失,

問題:當我們不在輸入時,我們如何才能使它具有價值? (請看看stackoverflow上的搜索框,但是在我們沒有指向輸入框後,那個在stackoverflow上的搜索框沒有回來?也許通過使用onblur?我是對嗎?

希望你明白我是什麼意思。

OK becouse一些你沒有得到我的意思 請參閱

時,即時通訊不點擊它。

alt text http://img39.imageshack.us/img39/4128/48048759.png

當我點擊它。

alt text http://img691.imageshack.us/img691/4485/94918020.png

時,即時通訊不會再次單擊它。

alt text http://img691.imageshack.us/img691/4485/94918020.png

應該

時,即時通訊不點擊它。

alt text http://img39.imageshack.us/img39/4128/48048759.png

時,即時通訊點擊它。

alt text http://img691.imageshack.us/img691/4485/94918020.png

時,即時通訊不會再次單擊它。

alt text http://img39.imageshack.us/img39/4128/48048759.png

+0

謝謝gertG的修復。 – 2010-07-25 15:19:48

+0

你的圖像消失了。你應該上傳他們 – mplungjan 2016-01-26 13:10:04

回答

29

你要這個

<input ... 
onfocus="if (this.value==this.defaultValue) this.value = ''" 
onblur="if (this.value=='') this.value = this.defaultValue" /> 

更新:一些較新的瀏覽器會做你想做的只是通過添加佔位符屬性:

<input placeholder="Please enter your name" /> 

這是根據您的代碼的PHP

echo <<<END 
<label for="$name">$lable</label> 
<input type="$type" name="$name" id="$name" value="$value" 
onfocus="if (this.value==this.defaultValue) this.value = ''" 
onblur="if (this.value=='') this.value = this.defaultValue"/> 
END; 
+0

是的,它應該看起來像這樣一個:),讓我先研究它:) – 2010-07-25 15:28:50

+0

仍然有一些問題。 'echo'

+0

'echo'';'work!謝謝 – 2010-07-25 15:40:05

3

如果我理解正確,SO使用該行的HTML這樣做的效果。

<input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search"> 

與您的問題沒有關係,但您可以並應該用else語句替換第二個if語句。

function Input($name,$type,$lable,$value= null){ 
    if (isset($value)) { 
    //if (this.value=='search') this.value = '' 
    echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" value="'.$value.'" onfocus="if (this.value==\''.$value.'\') this.value = \'\' "/>'; 
    } 
    else { 
    echo '<label for="'. $name .'">'. $lable .'</label><input type="'.$type.'" name="'. $name .'" id="'. $name .'" />'; 
    } 
} 

因爲如果isset($值)返回false,那麼你知道一個事實,即它沒有設置,因爲它只能返回兩個值,真或假。

編輯:無視此答案。在編輯之前不清楚問題是什麼。

3

望着源出於此頁面顯示了以下

<form id="search" action="/search" method="get"> 
    <div> 
    <input name="q" class="textbox" tabindex="1" 
    onfocus="if (this.value=='search') this.value = ''" 
    type="text" maxlength="80" size="28" value="search"> 
    </div> 
+0

是的,但它不回來:|當我再次做它.. – 2010-07-25 15:35:48

+1

你接受了一個答案。你爲什麼還在研究它? 這是SO使用的確切代碼。它的行爲與您在本網站上看到的完全相同。 – Mike 2010-07-25 15:47:02

2

或者這個,如果你想讓它不管改回默認輸入什麼文字...

<input ... 
onfocus="if (this.value==this.defaultValue) this.value = ''" 
onblur="if (this.value!=this.defaultValue) this.value = this.defaultValue" /> 
+0

爲什麼你要這樣做?那麼你也可以使它只讀。 – mplungjan 2012-06-10 15:25:09

+0

也許你寧願想要: '' 這樣,當輸入失去焦點時,如果沒有輸入文本,就會返回文本。 – mickey 2013-04-14 17:47:41

0

試試這個。也許它可以幫助你:

<form action="/search" method="get"> 
<input type="text" name="q" value="Search..." onfocus="if (this.value == 'Search...') (this.value='')" onblur="if (this.value == '') (this.value='Search...')" />