HTML5占位符在焦点处消失

是否有免费提供的jQuery插件可以更改占位符行为以匹配HTML5规范

聚焦前

关注好的旅行

关注坏Chrome、Firefox

您可以更改浏览器的功能

:

当元素的值为空字符串和/或控件未聚焦时（例如，通过在空白的未聚焦控件中显示该提示，并以其他方式隐藏该提示），用户代理应在从该提示中剥离换行符后向用户显示该提示

---

或者在当前的草案中是新的，所以我想这就是为什么Chrome和Firefox还不支持它的原因。请参阅。

罗伯特·尼曼讨论了这个问题并记录了他的方法。 它具有所有必要的HTML、CSS和JS

不幸的是，他通过改变值来解决问题。 如果占位符文本本身是有效的输入，则根据定义，这将不起作用

写了一个很好的jQuery插件，就是这么做的。 它比Robert的更稳定，而且当视野聚焦时，它也会褪色为浅灰色

看见 抓住它 玩 我修改了他的插件以读取占位符属性，而不是手动创建一个跨度。 有完整的代码：

HTML

---

我通过谷歌搜索出同一问题的解决方案，发现了这个问题。看来现有的插件要么在老浏览器中不起作用，要么在焦点上隐藏占位符

所以我决定采用自己的解决方案，同时尝试结合现有插件的最佳部分

---

如果遇到任何问题，您可以查看它并打开一个问题。

像这样简单的事情怎么样？在焦点上保存占位符属性值并完全删除该属性；在“模糊”上，将属性放回：

$('input[type="text"]').focus( function(){
  $(this).attr("data-placeholder",$(this).attr('placeholder')).removeAttr("placeholder");
});
$('input[type="text"]').blur( function(){
  $(this).attr("placeholder",$(this).attr('data-placeholder'));
});   

---

也许您可以尝试使用浮动标签模式：

---

请参见

我编写了自己的css3唯一解决方案。看看这是否满足了你的所有需求

这是我的解决方案：

输入元素设置为必需 占位符需要一个传统的跨度元素。此元素移动到输入元素的顶部位置：绝对； 使用css选择器测试输入元素的有效性。只要没有输入，占位符就会隐藏，必填字段就无效。 陷阱：占位符正在阻止输入的mouseevents！当鼠标位于父包装器内时，通过隐藏占位符元素可以避免此问题

<div class="wrapper">
  <input txpe="text" autofocus="autofocus" required/>
  <span class="placeholder">Hier text</span>
</div>

.placeholder {
  display: none;
  position: absolute;
  left: 0px;
  right: 0;
  top: 0px;
  color: #A1A1A1;
}
input:invalid + .placeholder {
  display: block;  /* show the placeholder as long as the "required" field is empty */
}
.wrapper:hover .placeholder {
  display: none; /* required to guarantee the input is clickable */
}

.wrapper{
  position: relative;
  display: inline-block;
}

---

你的fiddle works for me占位符不会在Chrome 17.0.963.12上消失。@antisanity我在开发频道：我最近更新了我的polyfill以支持此功能。适用于几乎所有浏览器，包括IE6，并且不依赖于jQuery。当然，例如，通过在空白的非焦点控件中显示它，并隐藏它，这意味着规范允许这种行为。我还建议，对于大多数人来说，将占位符文本隐藏在焦点上更有用。我看到有几个人试图选择占位符文本来删除它为什么不相信浏览器做的是正确的工作呢？浏览器比开发者更清楚什么是最好的方式每个浏览器都可以根据用户的喜好进行配置。看起来不错，但github repo两年内没有更新。。。我不愿意使用过时的代码。@ripper:这可能意味着代码可以正常工作吗？我建议您尝试使用它，如果您发现任何问题，请随意使用它并解决它们。但如果你找到更好的解决方案，请告诉我们。这可能意味着。。。只是不太能激发信心。。。但我想我会试一试。@ripper:它对我来说效果相当不错，除了一些我记不清的字体大小问题。你还需要字段。live'mouseup'，toggleLabel；当用户点击IEAndrew中的重置[X]图标时显示占位符，这太棒了！工作起来很有魅力。感谢您为我节省了时间&我必须自己动手：

.placeholder {
  background: white;
  float: left;
  clear: both;
}
.placeholder span {
  position: absolute;
  padding: 5px;
  margin-left: 3px;
  color: #999;
}
.placeholder input, .placeholder textarea {
  position: relative;
  margin: 0;
  border-width: 1px;
  padding: 6px;
  background: transparent;
  font: inherit;
}

/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .placeholder input, .placeholder textarea { padding: 4px; }
}

$('input[type="text"]').focus( function(){
  $(this).attr("data-placeholder",$(this).attr('placeholder')).removeAttr("placeholder");
});
$('input[type="text"]').blur( function(){
  $(this).attr("placeholder",$(this).attr('data-placeholder'));
});   

<div class="wrapper">
  <input txpe="text" autofocus="autofocus" required/>
  <span class="placeholder">Hier text</span>
</div>

.placeholder {
  display: none;
  position: absolute;
  left: 0px;
  right: 0;
  top: 0px;
  color: #A1A1A1;
}
input:invalid + .placeholder {
  display: block;  /* show the placeholder as long as the "required" field is empty */
}
.wrapper:hover .placeholder {
  display: none; /* required to guarantee the input is clickable */
}

.wrapper{
  position: relative;
  display: inline-block;
}