Javascript：this.value函数不起作用

Question

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

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函数。 为什么这些不起作用？

Answer 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 = '';
  }
}

Answer 2

我建议将placeholder用于此类功能。

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

浏览器支持

演示：

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

---

问题：

this在函数内部hideValue()是指全球window对象。

解：

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

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

并捕获内部事件处理程序

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

演示版

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

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

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

请检查一下。 工作正常