为什么这个简单的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库要好得多。