CODEWITHSUNDEEP
jqueryjsignature
user2948533
user2948533

Reputation: 1163

Can we provide watermark in the JSignature textbox?

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.

Upvotes: 1

Views: 473

Answers (1)

Erwin Hofman
Erwin Hofman

Reputation: 181

$(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.

Upvotes: 1

Related Questions