簽名板失去焦點
[英]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.