javascript - 将 jSignature 添加到 Bootstrap 表单

Question

我正在尝试将 jSignature 小部件添加到标准 Bootstrap 表单中，但到目前为止，表单上没有显示任何内容(其他表单字段显示正常)。

这是我的表格:

<form id="saveEvent" action="index.php" method="post">
  <div class="form-group">
    <label for="yourName">Your Name</label>
    <input type="text" class="form-control" id="yourName" name="yourName" placeholder="Your Name">
  </div>

  <div class="form-group">
    <label for="yourSignature">Your Signature</label>
    <div id="signature"></div>
  </div>
  <hr />
  <button type="reset" class="btn btn-default">Reset</button>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

我以正确的顺序包含页面底部的所有文件:

<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jSignature.min.js"></script>

<!--[if lt IE 9]>
	<script type="text/javascript" src="assets/js/flashcanvas.js"></script>
	<![endif]-->

<script>
  $(document).ready(function() {
    $("#signature").jSignature()
  })
</script>

但签名 Canvas 不显示。这是我所看到的屏幕截图，如果有帮助的话:

我没有收到任何服务器错误或控制台错误，所以现在很困惑 - 这是我第一次尝试使用 jSignature。

Answer 1

使用开发工具进一步检查后，我注意到签名 div 的高度为 0px。我最终将其添加到脚本中:

$(document).ready(function() {
  $("#signature").jSignature({
    height: 200
  });
  $("#signature").resize();
})

这至少现在显示了签名捕获。