HTML 输入 onfocus 和 onblur？

Posted 2023-05-08

【中文标题】HTML 输入 onfocus 和 onblur？

【英文标题】：HTML input onfocus & onblur?

【发布时间】：2011-03-20 18:30:47

【问题描述】：

好的，今天我正在制作一个帮助 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，这样当我单击框时，框内的文本就会消失，

问题：当我们不在输入时，我们如何使它具有价值？ （请查看***上的搜索框，但是***上的搜索框在我们不指向输入框后就不会回来？也许是通过使用onblur？我说的对吗？

希望你明白我的意思。

好的，因为你们中的一些人没有明白我的意思 请看

当我没有点击它时。

当我点击它时。

当我不再点击它时。

应该是

当我没有点击它时。

当我点击它时。

当我不再点击它时。

【问题讨论】：

感谢 gertG 的修复。

您的图片消失了。你应该上传它们

【参考方案1】：

你想要这个

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

【讨论】：

是的，它应该看起来像这个:)，让我先研究一下:)

还有一些问题。 echo '<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" />'; 会像 <input type="text" this.value="this.defaultValue"" (this.value="='')" if="" onfocus="if (this.value==this.defaultValue) this.value = '' onblur=" value="awdwadaw" id="name" name="name">

echo '<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" />'; 工作！谢谢

【参考方案2】：

查看此页面的源代码显示以下内容

<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> 

【讨论】：

您接受了一个答案。你为什么还在研究它？这是 SO 使用的确切代码。它的行为与您在本网站上看到的完全一样。

【参考方案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"> 

与您的问题无关，但您可以并且应该将第二个 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，那么您就知道它没有设置，因为它只能返回两个值之一，真或假。

编辑：忽略这个答案。在编辑之前不清楚问题是什么。

【参考方案4】：

或者，如果您希望无论输入什么文本都将其更改回默认值...

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

【讨论】：

你到底为什么要这么做？那你不妨把它设为只读。

也许您更愿意：<input ... onfocus="if (this.value==this.defaultValue) this.value = ''" onblur="if (this.value!='') this.value = this.defaultValue" /> 这样，当input 失去焦点时，如果没有输入任何文本，您就可以返回文本。

【参考方案5】：

试试这个。也许它可以帮助你：

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