时间戳

首页 > 解决方案 > jSignature 没有从 display:none 移动到 display:block 以多页形式正确

javascript - jSignature 没有从 display:none 移动到 display:block 以多页形式正确

问题描述

我已经阅读了大量材料，但没有找到我特定问题的答案。我有一个使用 jSignature 作为最后一个选项卡的多页表单。它基本上是 W3Schools 网站上的一行一行，但使用的是我的表格。无论如何，它在选项卡上使用 css 显示：无，然后代码将显示的选项卡更改为显示：块。这适用于除我的 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

请帮忙！谢谢！

标签： javascripthtmlcssformsjsignature

解决方案

我已经用 height:0;overflow:hidden 替换了 display: none ，而 display: block 则相反。现在完美运行！

推荐阅读