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

Browser support

<强>演示：

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

Demo

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>

请检查一下。工作正常

Javascript：this.value函数不起作用

3 个答案: