Javascript:this.value 函数不起作用

Javascript: this.value Function Not Working

本文关键字：函数 不起作用 value this Javascript      更新时间：2023-09-26

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

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 函数，它做相反的事情。为什么这些不起作用？

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

我建议使用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">

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

请检查此内容。它的工作正常

相关文章：