web-dev-qa-db-ja.com

HTML入力onfocus＆onblur？

わかりました。今日はヘルパーHTML関数を作成しています。次のようになります。

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を使用していますか？私は正しいですか？

私が何を意味するのか理解していただければ幸いです。

わかりました、あなたの何人かは私が意味するものを理解していないので、見てください

クリックしないとき。

alt text

私がそれをクリックしたとき。

alt text

もう一度クリックしないとき。

alt text

あるべきです

クリックしないとき。

alt text

私がそれをクリックしたとき。

alt text

もう一度クリックしないとき。

alt text

javascripthtmleffectsonbluronfocus
10
Adam Ramadhan

あなたはこれを求めている

<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;
29
mplungjan

私が正しく理解していれば、SOはこのHTML行を使用してその効果を発揮します。

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

質問とは関係ありませんが、2番目のifステートメントをelseステートメントに置き換えることができます。

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（$ value）がfalseを返す場合、trueまたはfalseの2つの値のいずれかしか返すことができないため、設定されていないことがわかります。

編集：この答えは無視してください。編集前の質問が何であったかは明確ではありませんでした。

3
Mike

このページのソースを見ると、次のことがわかります

<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>
3
Steve Weet

または、どのテキストが入力されてもデフォルトに戻す場合は、これを使用してください...

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

これを試して。多分それはあなたを助けることができます：

<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...')" />
0
Akmal Izzulhaq