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>

請檢查一下。 工作正常