使用JavaScript更改HTML标记属性

Question

我想知道我的网站中的一个非常好的html5 - input字段的占位符属性。

但是我在我网站上的方式变得糟糕地降低了。因为我跳过了字段的标签并使用占位符作为其标签。 在我有几个用占位符的输入字段，它们看起来像这样：

<input placeholder="hereismyplaceholder" />

.

但是在不可用HTML5占位符支持的情况下，我希望所有的输入字段与占位符更改为此。显然是他们的同等占位符文本：

<input onblur="if (this.value == '') {this.value = 'hereismyplaceholder';}" onfocus="if (this.value == 'hereismyplaceholder') {this.value = '';}" value="hereismyplaceholder" />

. 所以我所以我拉进了 modernizr ，我可以检测具有以下JavaScript的占位符：

if (Modernizr.input.placeholder) {
} else {
// BUT I NEED SOMETHING IN HERE
}

.

但我不知道现在该做什么。因为我没有javascript的经验，我不是开发人员。

最简单的解决方案是最好的。我并不讨论良好的做法，我只想现在工作。

Answer 1

你没有要求jQuery，但我不想担心跨浏览器问题：

if (!Modernizr.input.placeholder) {
  $("input[type=text]")
  .focus(function(e){
      if (this.value == $(this).attr('placeholder')) {
         this.value = '';
      }         
  })
  .blur(function(e){
    setPlaceholder(this);
  }).each(function(index, el){
    setPlaceholder(el);
  });

  function setPlaceholder(el) {
    if (el.value  == '') {
        el.value = $(el).attr('placeholder');
    }
  }
}

.

Answer 2

这里有一个例子， http://www.modernizr.com/docs/#input

对于您的特定用例，代码应该是

// if placeholder isn't supported:
if (!Modernizr.input.placeholder){
  // use a input hint script
  setInputHint(document.getElementById('idoftheinputelement'),'hereismyplaceholder');
}

.