Javascript：this.value 函数不工作答案

【问题标题】：Javascript: this.value Function Not WorkingJavascript：this.value 函数不工作
【发布时间】：2016-04-21 05:43:53
【问题描述】：

好的，所以我有以下功能：

function hideValue(value) {
    if (this.value == value) {
       this.value = '';
}

还有下面的表单域：

<input onfocus="hideValue('First Name')" type="text" name="first_name" value="First Name">

我无法获得隐藏值的功能。当我在函数中alert(value); 时，它返回正确的值。

我还有一个相反的 showValue 函数。为什么这些不起作用？

【问题讨论】：

当您以这种方式调用函数时，this 不会引用元素（因此 this.value 可能未定义）。
注意，你缺少一个右括号，这会给你一个语法错误。回答者应该在他们的回答中意识到这一点。
糟糕，那是我的错。它在我的代码中，但不在帖子中。感谢所有回复的人，现在有意义了！

标签： javascript html function input

【解决方案1】：

在 DOM 元素上的事件处理程序中，this 仅在函数的第一级引用该元素。因此，您需要将this 传递给函数：

<input
  onfocus="hideValue(this,'First Name') /* 'this' is only correct here */"
  type="text" name="first_name" value="First Name"
>

因此该函数应修改为：

function hideValue(element, value) {
  if (element.value == value) {
    element.value = '';
  }
}

【讨论】：

这比使用占位符有什么好处吗？或者占位符是更好的做法？
@TimothyFisher placeholder 是实现这种功能的最佳方式，除非你想支持奶奶一代的浏览器。
感谢图沙尔！我将此标记为解决方案，因为它是我看到的第一个使该功能起作用的解决方案。不过，我可能会采用占位符建议！
@TimothyFisher 没有问题。我很高兴你会使用placeholder :)

【解决方案2】：

我建议使用placeholder 来实现这种功能。

<input type="text" name="first_name" placeholder="First Name" />
                                     ^^^^^^^^^^^^^^^^^^^^^^^^

Browser support

演示：

&lt;input type="text" name="first_name" placeholder="First Name" /&gt;

问题：

函数hideValue()内的this指的是全局window对象。

解决方案：

您可以将this 引用传递给事件处理程序。

<input onfocus="hideValue(this, 'First Name')"
                          ^^^^

并在事件处理程序中捕获它

function hideValue(that, value) {
                   ^^^^           // What is that? `this`
    if (that.value === value) {
        that.value = '';
    }
}

Demo

function hideValue(that, value) {
    if (that.value === value) {
        that.value = '';
    }
}

&lt;input onfocus="hideValue(this, 'First Name')" type="text" name="first_name" value="First Name"&gt;

【讨论】：

【解决方案3】：

<input onfocus="hideValue(this,'First Name')" type="text" name="first_name" value="First Name">

<script>

    function hideValue(thisvalue,value) {

    if (thisvalue.value == value) {
       thisvalue.value = '';
        }
    }
</script>

请检查这个。它工作正常

【讨论】：