HTML 输入 onfocus &模糊？

发布于 2024-09-11 11:24:33 字数 1955 浏览 7 评论 0原文

好的，今天我正在制作一个 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？我说得对吗？

希望你明白我的意思。

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

当我没有点击它时。

当我点击它时。

当我不再点击它时。

应该是

当我没有点击它时。

当我点击它时。

当我不再点击它时。

原文

ok, today I'm making a helper HTML function. It looks like this:

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,

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?

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

写下不归期 2024-09-18 11:24:33

您想要此

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

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

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

末蓝 2024-09-18 11:24:33

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

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

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>

回复收藏 0 原文

呆头 2024-09-18 11:24:33

如果我理解正确的话，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($value) 返回 false，那么您就知道它未设置，因为它只能返回 true 或 false 两个值之一。

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

If I understand correctly, SO uses this line of HTML to do that effect.

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

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.

EDIT: Disregard this answer. It was not clear what the question was before the edit.

回复收藏 0 原文

允世 2024-09-18 11:24:33

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

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

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

回复收藏 0 原文

无名指的心愿 2024-09-18 11:24:33

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

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

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

回复收藏 0 原文

~没有更多了~