jQuery水印插件在IE9中提交水印作为表单的值答案

【问题标题】：Jquery watermark plugin submits watermark as form's value in IE9jQuery水印插件在IE9中提交水印作为表单的值
【发布时间】：2013-03-11 14:22:27
【问题描述】：

我正在使用这个插件：

http://code.google.com/p/jquery-watermark/downloads/detail?name=jquery.watermark-3.1.4.zip

问题是它在 IE9 中将水印值作为文本框的值提交。我怎样才能避免这个问题？

这个问题和这个帖子有点关系：http://code.google.com/p/jquery-watermark/issues/detail?id=91

但作者否认并将错误标记为无效。

【问题讨论】：

有什么理由不只是在需要的地方使用placeholder + a shim？
@Matt Ball：因为我需要支持 IE8
因此是“需要的垫片”。 @PeterCampbell 很确定这不是同一个 jQuery 插件。
插件的源似乎在可用时使用占位符 "...if('placeholder' in document.createElement('INPUT'))..."

标签： javascript jquery html internet-explorer watermark

【解决方案1】：

您可能只需要使用一些简单的 JS 和 CSS 并自己动手。使用海量的包罗万象的插件非常有用。

http://jsfiddle.net/VF8Dr/

https://stackoverflow.com/a/14246071/884862

CSS

.placeholder { 
  color: gray; 
  position: absolute;
  padding-left: 10px;
}

function addPlaceholder(id, text) {
  var elm = document.getElementById(id);
  var ph = document.createElement("SPAN");
  ph.className = "placeholder";
  ph.innerHTML = text;
  elm.parentNode.insertBefore(ph, elm.nextSibling);
  ph.style.left = elm.offsetLeft + 'px';
  ph.style.top = elm.offsetTop + 'px';
  ph.onclick = function() {
    ph.style.display = 'none';
    elm.focus();
  };
  elm.onfocus = function() {
    if(ph.style.display != 'none')
      ph.style.display = 'none';
  };
  elm.onblur = function() {
    if(elm.value == '')
      ph.style.display = '';
  };
}
addPlaceholder("demo", "my text");

根据您的需要，简单的可能是最好的。

【讨论】：

【解决方案2】：

我知道这是很老的帖子，但今天我遇到了同样的问题。问题：水印值作为文本框值传递。

基本上，我在所有搜索功能中都使用了水印，并且整个搜索功能控件都包含在更新面板中，包括水印文本框。在我的情况下，由于更新面板，文本框值作为水印值传递给服务器端。所以我从更新面板中取出了水印文本框，现在一切都按预期工作了。

【讨论】：