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

Question

I am using this plugin:

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

and problem is it submits the watermark value as textbox's value in IE9. How can I avoid this issue?

The issue is somewhat related to this post: http://code.google.com/p/jquery-watermark/issues/detail?id=91

but the author denies and marks the bug as invalid.

Answer 1

You could probably just use some simple JS and CSS and roll your own. Using massive all encompassing plug-ins are great when they work.

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

Depending on your needs, simple may be best.

Answer 2

I know this is very old post but today i faced the same issue. Issue: Watermark value was passing as textbox value.

Basically i was using Watermark in all of search functionality and the entire search functionality controls are wrapped in update-panel including watermark text box. In my case because of updatepanel, textbox value being passed as watermark value to the serverside. So i took out watermark textbox out of updatepanel and everything working as expected now.