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 = "";
  }
});

您应该阅读有关事件绑定的this。如果我对你想要完成的事情是正确的，可能首先使用占位符。

Answer 2

您的代码运行正常。 http://jsfiddle.net/bigneo/7j217d8y/

我认为问题是你的方法没有被文件看到。你可以将它们包装在document.ready

中

像这样，但需要jQuery：

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

Answer 3

您的代码在Chrome中运行良好44.您的浏览器是什么？

为什么不在s标签中使用placeholder属性？

Answer 4

您的代码很好，您只需要告诉浏览器何时运行它。包裹它：

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

    // code goes here

});

对于vanilla JS来说，这是一个更好的选择，而不是导入整个JQuery库只是为了使用$(document).ready(function()

为什么这个简单的JavaScript代码不起作用

4 个答案: