Question

我正在使用平板电脑来捕获员工的签名。它在IE和Firefox上运行良好。用笔或手指触摸捕获并绘制用户想要的图形。但是，在谷歌浏览器上它可以与鼠标一起使用，但不能在用户放心时使用。它只是在屏幕上放置点。在另一个应用程序中，它使页面滚动，屏幕上没有绘图我该如何解决？这是代码：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/south-street/jquery-ui.css" rel="stylesheet"/> 
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link type="text/css" href="css/jquery.signature.css" rel="stylesheet"> 
        <script type="text/javascript" src="js/jquery.signature.js"></script>
        <script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
    <script>// 
  function preventBack(){window.history.forward();}
  setTimeout("preventBack()", 0);
  window.onunload=function(){null;};
</script>
    </head>
<body>    
<style>
        body > iframe { display: none; }
        .kbw-signature { width: 200px; height: 100px; }
</style>
<script src="js/jquery.signature.js">    
</script>
<script>    
$(function() {
	$('#sig').signature();
        $('#sig').signature('option',     {color: '#ff0000'});
        $('#sig').signature('toDataURL'); 
	$('#toDataURL').click(function() {		
               var x=$('#sig').signature('toDataURL');
               var y = $('#nm').val();
               var z =$('#fn').val();
               post('captureSignature',{name:x,
                                        nm:y,
                                        fn:z});//               
	});
        $('#clear').click(function() {
		$('#sig').signature('clear');
	});       
});
function post(path, parameters) {
    var form = $('<form></form>');

    form.attr("method", "post");
    form.attr("action", path);

   $.each(parameters, function(key, value) {
       var field = $('<input></input>');
            field.attr("type", "hidden");
            field.attr("name", key);
            field.attr("value", value);
            form.append(field);
    });

    // The form needs to be a part of the document in
    // order for us to be able to submit it.
    $(document.body).append(form);
    form.submit();
}
</script>

<h1>DEMO signaturecapture</h1>
<p>capturing signature</p>
 
<p>name: <input name="name" id="nm" title="please enter your name" required></p>

<p>signature :</p>
<div id="sig"></div>
<p style="clear: both;"><button id="clear">Clear</button> 
	
<button id="toDataURL">ok and save</button></p>
<script>
        var c=document.getElementById("sig");
        var ctx=c.getContext("2d");    
    </script>  
    </body>
</html>

触摸功能在装有Chrome的平板电脑上不起作用

0 个答案: