时间戳

首页 > 解决方案 > 无法检查签名板是否为空

javascript - 无法检查签名板是否为空

问题描述

我的签名板有问题。当我按下提交按钮而不在键盘上签名时，我会抛出一个错误，但我收到了这个错误：

未捕获的 ReferenceError：未定义签名板

这是我的代码：

jQuery(document).ready(function () {
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
  signaturePadCanvas.setAttribute("width", parentWidth);
  var signaturePad = new SignaturePad(signaturePadCanvas);
});

function submit() {
  if (signaturePad.isEmpty()) {
    console.log("Empty!");
  }
}
.signature-pad-canvas-wrapper {
    margin: 15px 0 0;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.signature-pad-canvas-wrapper::after {
    content: 'Name';
    border-top: 1px solid #cbcbcb;
    color: #cbcbcb;
    width: 100%;
    margin: 0 15px;
    display: inline-flex;
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<div class="signature-pad-canvas-wrapper">
    <canvas id="signature-pad-canvas"></canvas>
    <button onClick="submit()">Submit</button>
</div>

有任何想法吗？

标签： javascriptjqueryhtmlcss

解决方案

您的signaturePad变量超出了submit()函数的范围，在全局范围内声明它然后使用它。

var signaturePad;
jQuery(document).ready(function () {
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
  signaturePadCanvas.setAttribute("width", parentWidth);
  signaturePad = new SignaturePad(signaturePadCanvas);
});

function submit() {
  if (signaturePad.isEmpty()) {
    console.log("Empty!");
  }
}
.signature-pad-canvas-wrapper {
    margin: 15px 0 0;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.signature-pad-canvas-wrapper::after {
    content: 'Name';
    border-top: 1px solid #cbcbcb;
    color: #cbcbcb;
    width: 100%;
    margin: 0 15px;
    display: inline-flex;
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    z-index: -1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>
<div class="signature-pad-canvas-wrapper">
    <canvas id="signature-pad-canvas"></canvas>
    <button onClick="submit()">Submit</button>
</div>

推荐阅读