如何在同一页面中添加 2 个签名垫答案

【问题标题】：How to add 2 signature_pad in a same page如何在同一页面中添加 2 个签名垫
【发布时间】：2015-09-16 20:08:10
【问题描述】：

我正在尝试将 2 个签名字段放在同一页面中，使用此演示 http://szimek.github.io/signature_pad 和代码 https://github.com/szimek/signature_pad。

如何将 2 个签名板放在同一页面中，每个签名板都有 2 个清晰按钮和 1 个保存按钮？保存按钮应该会显示一条警报，其中包含关于哪个 pad 为空的错误消息，或者如果两个 pad 都已签名，则会显示成功消息。

这是我现在拥有的（感谢 szimek）：http://jsfiddle.net/szimek/ps65Q/

HTML：

var wrapper1 = document.getElementById("signature-pad-1"),
    canvas1 = wrapper1.querySelector("canvas"),
    signaturePad1;

var wrapper2 = document.getElementById("signature-pad-2"),
    canvas2 = wrapper2.querySelector("canvas"),
    signaturePad2;


function resizeCanvas(canvas) {
    var ratio =  window.devicePixelRatio || 1;
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);

resizeCanvas(canvas2);
signaturePad2 = new SignaturePad(canvas2);

JS：

var wrapper1 = document.getElementById("signature-pad-1"),
    canvas1 = wrapper1.querySelector("canvas"),
    signaturePad1;

var wrapper2 = document.getElementById("signature-pad-2"),
    canvas2 = wrapper2.querySelector("canvas"),
    signaturePad2;


function resizeCanvas(canvas) {
    var ratio =  window.devicePixelRatio || 1;
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

resizeCanvas(canvas1);
signaturePad1 = new SignaturePad(canvas1);

resizeCanvas(canvas2);
signaturePad2 = new SignaturePad(canvas2);

【问题讨论】：

添加按钮并将其事件处理程序设置为为每个键盘调用signaturePad.clear()。对于保存按钮，将其功能设置为检查任一键盘是否为空并显示相应的消息。
@whrrgarbl 但如果我制作了 2 个签名板 div，那么我应该在哪里放置保存按钮？你能帮忙吗？
您可以将按钮放在页面上任何您喜欢的位置，从编码的角度来看，唯一重要的是它的onclick 属性会触发您的“保存”功能。

标签： javascript jquery css html signaturepad

【解决方案1】：

Here is a short example with clear and save buttons.

主要的补充是：

HTML - 为按钮添加元素。这些可以放在您喜欢的任何地方，只需确保为它们提供唯一的 ID，因为这是您在 JavaScript 代码中访问它们的方式。

<button id="clear1">Clear</button>
<button id="clear2">Clear</button>
<button id="save">Save</button>

JS - 添加清除和保存功能，并设置您刚刚制作的按钮的onclick属性以调用这些功能。

function clear1() {
    signaturePad1.clear();
}
function clear2() {
    signaturePad2.clear();
}
function save() {
    if (signaturePad1.isEmpty() || signaturePad2.isEmpty())
        alert("Error: Please sign both pads!");
    else
        alert("Success!");
}

$("#clear1").click(clear1);
$("#clear2").click(clear2);
$("#save").click(save);

看起来你已经在使用 jQuery，所以我用它来设置 onclick 属性，当然还有其他方法可以做到这一点。

【讨论】：