签名板失去焦点
[英]Signature Pad looses focus
问题描述
我有这个HTML代码和使用bootstrap和Signature Pad的 javascript。 我正在使用Bootstrap的折叠功能。 当我将第一个面板设置为默认面板时，签名板不起作用（我无法签名），但是当我将第三个面板添加为默认面板（在签名板所在的位置）时，它会按预期工作。 知道为什么会这样吗？
这是代码：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Signature Pad demo</title> <link href="css/signature-pad.css" rel="stylesheet" /> <title>Employee Onboarding Demo</title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <meta name="description" content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation."> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="css/signature-pad.css"> </head> <body onselectstart="return false"> <form id="form1" > <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Enter Your Personal Details</a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <table> <tr> <td>First Name</td> <td> <input type="text" ID="txtFName" name="txtFName"></td> <td></td> </tr> <tr> <td>Last Name</td> <td> <input type="text" ID="txtLName" name="txtLName"></td> <td></td> </tr> <tr> <td>Middle Initial</td> <td> <input type="text" ID="txtMiddleI" name="txtMiddleI"></td> <td></td> </tr> <tr> <td>Other Name</td> <td> <input type="text" ID="txtOtherName" name="txtOtherName"></td> <td></td> </tr> <tr><td colspan="3"><button ID="btnSavePersonal" OnClick="btnSavePersonal_Click">Save</button> </td></tr> </table> </div> </div> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Answer These Questions</a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> <table> <tr> <td> <asp:CheckBox ID="CheckBox1" runat="server" /></td> <td>1. A citizen of the United States</td> <td></td> </tr> <tr> <td><asp:CheckBox ID="CheckBox2" runat="server" /></td> <td>2. A noncitizen national of the United States (See instructions)</td> <td></td> </tr> <tr> <td><asp:CheckBox ID="CheckBox3" runat="server" /></td> <td>3. A lawful permanent resident. (Alien Registration Number/USCIS Number):</td> <td> <asp:TextBox ID="txtARNUSCIS" runat="server"></asp:TextBox></td> </tr> <tr> <td><asp:CheckBox ID="CheckBox4" runat="server" /></td> <td>4. An alien authorized to work until (expiration date, if applicable, mm/dd/yyyy):</td> <td> <asp:TextBox ID="txtARNExpDt" runat="server"></asp:TextBox></td> </tr> <tr><td colspan="3"><asp:Button ID="btnSaveQA" runat="server" Text="Save" OnClick="btnSaveQA_Click" /></td></tr> </table> </div> </div> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Sign Here</a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> <div id="signature-pad" class="m-signature-pad"> <div class="m-signature-pad--body"> <canvas></canvas> </div> <div class="m-signature-pad--footer"> <div class="description">Sign above</div> <button type="button" class="button clear" data-action="clear">Clear</button> <button type="button" class="button save" data-action="save">Save</button> <input type="text" name="abc" id="abc"> </div> </div> </div> </div> </div> </div> </form> <script src="js/signature_pad.js"></script> <script src="js/app.js"></script> </body> </html>
2 个解决方案
解决方案1
0 2017-02-03 14:28:22
您必须初始化画布。 可以看起来像这样：signaturePad = new SignaturePad（canvas）;
解决方案2
0 已采纳 2017-03-07 11:22:06
我最终将我的Signature Pad脚本放入iFrame，然后使用隐藏的输入将响应处理回主页。 像魅力一样工作。
清除签名板上的签名
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.