Jquery水印插件在IE9中将水印作为表单值提交

Question

我正在使用这个插件：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，但作者否认了这个bug，并将其标记为无效。

- Jack

---

为什么你不直接使用 placeholder 加上必要的 shim 呢？ - Matt Ball

@Matt Ball：因为我需要支持IE8。 - Jack

因此，“需要时使用垫片”。@PeterCampbell非常确定那不是同一个jQuery插件。 - Matt Ball

如果可用，插件的源代码似乎使用占位符 "... if（'placeholder' in document.createElement（'INPUT'））..." - Louis Ricci

Answer 1

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

基本上，我在所有搜索功能中都使用水印，并且整个搜索功能的控件都包含在update-panel中，包括水印文本框。在我的情况下，由于updatepanel的原因，文本框值被传递为水印值到服务器端。所以我将水印文本框从updatepanel中取出，现在一切正常工作。

- user1551655

Answer 2

你可以使用一些简单的JS和CSS来自己编写。当它们起作用时，使用大型全面插件非常好。

http://jsfiddle.net/VF8Dr/

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

CSS

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

JS

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

根据您的需求，简单可能是最好的选择。

- Louis Ricci