Question

我有这个带有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>

Answer 1

您必须初始化画布。可以看起来像这样： signaturePad = new SignaturePad（帆布）;

Answer 2

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

签名垫失去焦点

以下是代码：

2 个答案: