使用 javascript 更改 HTML 标记属性答案

【问题标题】：Changing HTML tag attributes with javascript使用 javascript 更改 HTML 标记属性
【发布时间】：2011-08-26 16:11:03
【问题描述】：

我试图在我的网站中获得我认为非常好的 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 的经验，所以我不是开发人员。

请提供最简单的解决方案。我对好的做法并不在意，我只是希望它现在能起作用。

【问题讨论】：

来自 HTML 5 规范：“占位符属性不应用作标签的替代品。”。占位符提供提示以帮助进入，它不能替代真实的标签。
是的，我也读过。谢谢。为了清楚起见，一般设计师的举动。在我看来，它只是简化了事情。 IE。推特
我会说当你只有很少的字段时，无标签字段可以工作，可能是 2 或 3
在某人即将开始填写该字段时删除说明并不能达到清晰。
那是错误的词。而且我的领域确实很少。有2个占位符。 3 一起在另一页上。和 1 一起在另一个页面上。

标签： javascript html label placeholder modernizr

【解决方案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');
    }
  }
}

【讨论】：

我认为在常规 javascript 中可以实现类似的事情吗？或者是否存在很大的跨浏览器问题，我应该将 jQuery 放入我的网站以使其变得简单吗？
这很简单，这里没有太多可能跨浏览器的问题，用普通的 JS 很容易实现，只是更多的代码。我不能继续写这一切。如果您没有 JS 经验，我会包含 jQuery 并从现在开始使用它。让事情变得更容易（尽管我自己使用其他东西）
“没用”是寻求帮助时最糟糕的评论。你调试了吗？哪个部分不工作？我不会为你编写生产就绪的代码，我会向你展示如何去做！
我的错。来自 IE 开发工具控制台：SCRIPT5009: '$' is undefined javascript.js, line 6 character 5 现在可能值得一提 - 为了整洁起见，jquery 代码位于链接的 javascript 文档中并不重要，不是吗？
啊，他们网站上的缩小版 jquery 不起作用 - code.jquery.com/jquerymin.js 好吧，使用普通版 jquery 后，错误消失了，但仍然没有占位符

【解决方案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');
}

【讨论】：

这要求您对所需的每个字段进行单独调用，并且您需要复制已放入占位符 HTML 属性中的内容