我通读了大量资料，但没有找到我的特定问题的答案。我有一个多页表单，它使用 jSignature 作为最后一个选项卡。它基本上是来自 W3Schools 网站的一行一行，但使用我的表格。无论如何，它在选项卡上使用 display:none 的 css，然后代码将显示的选项卡更改为 display:block。这对除我的 jSignature 之外的所有东西都非常有用。它清楚地读取了变化，因为它是可见的(即不在显示中:无)，但它被压缩且无法使用。直到...您调整屏幕大小。然后它弹回来。我已经在 css 中为它尝试了各种样式，并更改了显示:在 JS 中键入，但它的作用是一样的。
这是 mcve:
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="height=device height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
<style>
.tab {
display: none;
}
</style>
<body>
<form id="regForm" action="/action_page.php">
<div class="tab tab1">
Carrier:
<p><input type="text" oninput="this.className = ''" name="carrier" value="My Company"></p>
Location:
<p><select oninput="this.className = ''" name="location">
<option value="" disabled selected>Choose your location</option>
<option oninput="this.className = ''" value="PDX">PDX</option>
<option oninput="this.className = ''" value="SEA">SEA</option>
</select></p>
</div>
<div class="tab tab2">
Sign in the box below:
<input type="button" class="clear-button" value="Clear" style="float:right;"/>
<div class="signature-panel">
</div>
</div>
<img id="rendered" src="" style="display:none">
<br>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<span class="step"></span>
<span class="step"></span>
</form>
<script>
$('.signature-panel').jSignature();
$('.clear-button').on('click', function(e) {
$('.signature-panel').jSignature("reset");
});
var currentTab = 0;
showTab(currentTab);
function showTab(n) {
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
}
function nextPrev(n) {
var x = document.getElementsByClassName("tab");
if (n == 1 && !validateForm()) return false;
x[currentTab].style.display = "none";
currentTab = currentTab + n;
if (currentTab >= x.length) {
document.getElementById("regForm").submit();
return false;
}
showTab(currentTab);
}
function validateForm() {
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
for (i = 0; i < y.length; i++) {
if (y[i].value == "") {
y[i].className += " invalid";
valid = false;
}
}
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid;
}
</script>
</body>
</html>
以及测试它的链接: https://www.w3schools.com/code/tryit.asp?filename=G8DPE45DOMRR
求助!谢谢!
最佳答案
我已将 display: none 替换为 height:0;overflow:hidden 并替换为 display: block。现在完美运行!
关于javascript - jSignature 未从显示 :none to display:block correctly in multi-page form 移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58125817/