為什么這個簡單的JavaScript代碼無法正常工作

Question

我正在嘗試在表單輸入中編寫代碼，例如當用戶單擊表單元素（onfocus）時，該元素的值消失了，但是如果用戶在此之后單擊任何其他輸入元素（則不填寫前一個形式的輸入元素），則重新顯示前一個元素的值。

HTML代碼如下所示：

<label id="color_text">Forename:</label><br />
<input id="f1" class="form-control" type="text" name="forename"    value="Forename" /><br /><br />

我嘗試運行的JavaScript如下所示：

<script>
    var new_id = document.getElementById("f1");

    new_id.onfocus = function(){
        if (new_id.value == "Forename"){
        new_id.value = "";
        }
     };

    new_id.onblur = function() {
        if (new_id.value == ""){
        new_id.value = "Forename"; 
        }
    };

Answer 1

為了獲得最大的兼容性，您應該使用addEventListener或attachEvent （無論是否可用）。 因此，對於焦點事件，如下所示：

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

addEvent(new_id, 'focus', function() {
  if (new_id.value == "Forename"){
      new_id.value = "";
  }
});

你應該閱讀此有關事件的結合。 如果我對您要完成的工作是正確的，則可能首先使用占位符。

Answer 2

您的代碼工作正常。 http://jsfiddle.net/bigneo/7j217d8y/

我認為問題是您的方法沒有被文檔看到。 您可以將它們包裝在document.ready

像這樣，但是需要jQuery：

$(document).ready(function() {
    // your methods here
});

Answer 3

您的代碼在Chrome 44中運行良好。您的瀏覽器是什么？

為什么不在<input>標簽中使用placeholder屬性？

Answer 4

您的代碼很好，您只需要告訴瀏覽器何時運行即可。 將其包裝在此：

document.addEventListener('DOMContentLoaded', function() {

    // code goes here

});

對於香草JS而言，這比使用$(document).ready(function()導入整個JQuery庫要好得多。