Can we provide watermark in the JSignature textbox?

Question

I am using JSignature to capture the signature of clients in our web application. There is a requirement that asks for providing a watermark on every signature texbox:some thing like "Please Sign Here" and while signing it should be removed.

Is it possible to have watermark in JSignature TextBox?

Thanks in advance.

Since I dont see any API provided by JSignature,was hoping someone might suggest some hack, in case they have already encountered and resolved it befoe :) — user2948533, Nov 03 '15 at 14:26

score 1 · Answer 1 · answered Dec 15 '15 at 13:33

$(document).ready(function() {
  var $sigdiv = $("#signature").jSignature({'UndoButton':true});
 
 $("#signature").bind('change', function(e){
  if ( $sigdiv.jSignature('getData', 'native').length > 0 )
   $("#signature span.label").addClass('hidden');
  else
   $("#signature span.label").removeClass('hidden');
 });
  
 $('.reset').bind('click', function () {
  $sigdiv.jSignature("reset");
  $("#signature span.label").removeClass('hidden');
 });
  
});

#signature * {
 zoom: 1;
 position: relative;
 z-index: 2;
}
#signature span.label {
 color: #bbb;
 display: block;
 font-size: 20px;
 padding: 20px;
 position: absolute;
 z-index: 1;
}
.hidden {
  display: none;
}

  <div id="signature">
   <span class="label">Your signature &hellip;</span>
  </div>
<button class="reset">Reset</button>

Off course, you can use (background)image(s) as well within the span.label. Use z-index, to position the canvas over the span.label.

Can we provide watermark in the JSignature textbox?

1 Answers1