Signature Pad失去焦点答案

【问题标题】：Signature Pad looses focusSignature Pad失去焦点
【发布时间】：2017-02-03 14:20:40
【问题描述】：

我有这个带有 javascript 的 html 代码，它使用 bootstrap 和 Signature Pad。我正在使用 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>

【问题讨论】：

请不要在您的问题中使用 Google Analytics。我已经删除了代码的相关部分。谢谢
另外，上面的代码使用了两个没有包含相对 URL 的脚本：signature_pad.js 和 app.js。

标签： javascript html signaturepad

【解决方案1】：

你必须初始化你的画布。可以看起来像这样：签名板 = 新签名板（画布）；

【讨论】：

【解决方案2】：

我最终将我的 Signature Pad 脚本放在 iFrame 中，然后使用隐藏输入将响应返回到主页。像魅力一样工作。

【讨论】：