Javascript HTML 输入 onfocus 和 onblur？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3329694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML input onfocus & onblur?
提问by Adam Ramadhan
ok, today I'm making a helper HTML function. It looks like this:
好的，今天我正在制作一个辅助 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 .'" />';
}
}
As you can see, if you insert a value it will do some JavaScript so that when I click the box, the text inside the box will disappear,
如您所见，如果您插入一个值，它会执行一些 JavaScript，以便当我单击该框时，框内的文本将消失，
Question:How can we make it to have a value when we are not on the input? (please look at the search box on stackoverflow, however the one that is on stackoverflow doesn't come back after we are not pointing at the input box? Maybe by using onblur? Am I right?
问题：当我们不在输入上时，我们如何使它具有值？（请看stackoverflow上的搜索框，但是stackoverflow上的那个在我们不指向输入框后就不会回来了？也许是使用onblur？我说得对吗？
Hope you understand what I mean.
希望你明白我的意思。
ok becouse some of you are not getting what i mean please see
好的，因为你们中的一些人没有明白我的意思，请看
when im not clicking it.
当我不点击它时。
when im clicking it.
当我点击它时。
when im not clicking it again.
当我不再点击它时。
it should be
它应该是
when im not clicking it.
当我不点击它时。
when im clicking it.
当我点击它时。
when im not clicking it again.
当我不再点击它时。
回答by mplungjan
You want this
你要这个
<input ...
onfocus="if (this.value==this.defaultValue) this.value = ''"
onblur="if (this.value=='') this.value = this.defaultValue" />
Update: Some newer browsers will do what you want simply by adding the placeholder attribute:
更新：一些较新的浏览器只需添加占位符属性即可完成您想要的操作：
<input placeholder="Please enter your name" />
Here is the PHP according to your code
这是根据您的代码的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;
回答by Mike
If I understand correctly, SO uses this line of HTML to do that effect.
如果我理解正确，那么 SO 使用这行 HTML 来实现这种效果。
<input name="q" class="textbox" tabindex="1" onfocus="if (this.value=='search') this.value = ''" type="text" maxlength="80" size="28" value="search">
Not related to your question, but you could and should replace your second if statement with an else statement.
与您的问题无关，但您可以并且应该用 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 .'" />';
}
}
Because if isset($value)returns false then you know for a fact that it isn't set since it can only return one of two values, true or false.
因为如果isset($value)返回 false 那么你知道它没有设置的事实，因为它只能返回两个值之一，真或假。
EDIT: Disregard this answer. It was not clear what the question was before the edit.
编辑：无视这个答案。在编辑之前不清楚问题是什么。
回答by Steve Weet
Looking at the source for this page shows the following
查看此页面的源代码显示以下内容
<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>
回答by Andy
Or this if you want it to change back to default no matter what text is entered...
或者，如果您希望无论输入什么文本都将其更改回默认值...
<input ...
onfocus="if (this.value==this.defaultValue) this.value = ''"
onblur="if (this.value!=this.defaultValue) this.value = this.defaultValue" />
回答by Akmal Izzulhaq
Try this. Maybe it can help you:
尝试这个。也许它可以帮助你：
<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...')" />
