jquery - 带有消息框的多个表单上的 HTML5 float 提交按钮？

Question

我的单页应用程序中有多个表单。每个表单都有不同数量的元素，其中一些需要用户滚动。最初我的提交按钮位于表单的最底部。一些用户问这个按钮是否可以 float 并始终可见。所以我正在寻找适用于所有形式的通用解决方案。问题之一是每个表单的右上角都有“清除表单”按钮。第二个问题是某些表单可能在“清除表单”旁边多了一个按钮。所以我不确定放置提交按钮的最佳位置是什么？如果“记录已成功保存”，按钮旁边还会有消息通知用户。或“记录已成功更新。” .如果有人可以提供帮助或提出一些示例，最好的解决方案是什么，请告诉我!提前致谢。这是我的应用程序中的一种形式的示例:

div.submitBox {
	position:fixed;
	top:40px;
	left:330px;
}
.required:before {
    content: '*';
    color: red;
    margin-right: 5px;
}
form.frmLayout {
	max-width: 1200px;
  height: 450px;
}
form.frmLayout fieldset {
	border: #ccc 2px solid;
	margin: 10px;
	border-radius:3px;
}
form.frmLayout legend {
	font-weight: bold;
	background-color: #c8e2db;
	border-radius:3px;
	padding: 3px;
	border: #ccc 2px solid;
}
form.frmLayout label {
	float: left;
  font-weight: bold;
  display: block;
  width: 100px;
}
form.frmLayout input[type=text] { 
	text-align: left;
}
form.frmLayout input[readonly="readonly"] {
    background-color: #E0DBDD;
}

<form name="demoForm" id="demoForm" method="POST" action="#" class="frmLayout">
		<fieldset>
			<legend>Demographic</legend>
			<div>
				<div style="float:right;">
					<span><input type="button" name="clearForm" id="clearDemo" value="Clear Form"></span>
				</div>
			</div>
			<div class="formItem">
				<span style="color:red;">* <b>Required Fields</b></span>
			</div>
			<div class="formItem">
				<label for="last_name" class="required">Last Name:</label>
				<input type="text" name="frm_lname" id="frm_lname" value="" size="20" maxlength="30" required />
			</div>
			<div class="formItem">
				<label for="first_name" class="required">First Name:</label>
				<input type="text" name="frm_fname" id="frm_fname" value="" size="20" maxlength="30" required />
			</div>
			<div class="formItem">
				<label for="dob" class="required">DOB:</label>
				<input type="text" name="frm_dob" id="frm_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" required />
			</div>
			<div class="formItem">
				<label for="gender" class="required">Gender:</label>
				<input type="text" name="frm_gender" id="frm_gender" value="" size="1" maxlength="1" title="F = Female; M = Male" pattern="[MmFf]" required />
			</div>
			<div class="submitBox">
				<span><input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" /></span>
				<span style="float:right;" id="MsgDemoForm"></span>
			</div>
		</fieldset>
	</form>

Answer 1

因此，您可以使提交区域“固定”在可视区域的底部。这将使提交按钮始终存在，而通常情况下它不会存在，但在可见时会返回到其原始位置。

神奇的是 stickIt() 函数。它检查 .submitBox 的顶部是否大于 .testArea 的可视区域的高度。如果是绝对定位.submitBox在可视区域的底部。

您需要为所有内容设置样式，这样当它位于其他元素之上时，它看起来会更好，而不是标签和输入顶部的无样式按钮。从 UI/UX 的 Angular (我不是专家)来看，我认为这不是最佳解决方案，但却是您的用户要求的解决方案。我这样说是因为您希望您的用户滚动浏览所有必填字段并提交它们。如果您事先显示提交按钮，他们可能会认为该字段已“完成”并尝试提交不完整的表单。

您可以将提交区域放置在右上角，在清除表单按钮所在的同一区域，并禁用该按钮，直到正确填写所有必需的表单。这是两全其美的做法，因为按钮始终可见，但在满足要求之前保持不可用。

$('.testArea').on('scroll', stickIt);
stickIt();

function stickIt() {

  var submitBox = $('.submitBox'),
    testArea = $('.testArea'),
    offset = 25;

  if (submitBox.offset().top > $(this).scrollTop() + offset) {
    submitBox.addClass('sticky').css('bottom', testArea.height() + submitBox.height());
  } else {
    submitBox.removeClass('sticky');
  }

}

.testArea {
  position: relative;
  width: 100%;
  height: 150px;
  overflow: scroll;
}

div.submitBox {
  width: 100%;
}

div.submitBox.sticky {
  position: absolute;
  bottom: 0;
}

.frmLayout {
  position: relative;
}

.required:before {
  content: '*';
  color: red;
  margin-right: 5px;
}

form.frmLayout {
  max-width: 1200px;
  min-height: 300px;
}

form.frmLayout fieldset {
  border: #ccc 2px solid;
  margin: 10px;
  border-radius: 3px;
}

form.frmLayout legend {
  font-weight: bold;
  background-color: #c8e2db;
  border-radius: 3px;
  padding: 3px;
  border: #ccc 2px solid;
}

form.frmLayout label {
  float: left;
  font-weight: bold;
  display: block;
  width: 100px;
}

form.frmLayout input[type=text] {
  text-align: left;
}

form.frmLayout input[readonly="readonly"] {
  background-color: #E0DBDD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testArea">

  <form name="demoForm" id="demoForm" method="POST" action="#" class="frmLayout">
    <fieldset>
      <legend>Demographic</legend>
      <div>
        <div style="float:right;">
          <span><input type="button" name="clearForm" id="clearDemo" value="Clear Form"></span>
        </div>
      </div>
      <div class="formItem">
        <span style="color:red;">* <b>Required Fields</b></span>
      </div>
      <div class="formItem">
        <label for="last_name" class="required">Last Name:</label>
        <input type="text" name="frm_lname" id="frm_lname" value="" size="20" maxlength="30" required />
      </div>
      <div class="formItem">
        <label for="first_name" class="required">First Name:</label>
        <input type="text" name="frm_fname" id="frm_fname" value="" size="20" maxlength="30" required />
      </div>
      <div class="formItem">
        <label for="dob" class="required">DOB:</label>
        <input type="text" name="frm_dob" id="frm_dob" value="" size="10" maxlength="10" placeholder="MM/DD/YYYY" required />
      </div>
      <div class="formItem">
        <label for="gender" class="required">Gender:</label>
        <input type="text" name="frm_gender" id="frm_gender" value="" size="1" maxlength="1" title="F = Female; M = Male" pattern="[MmFf]" required />
      </div>
      <div class="submitBox">
        <span><input type="submit" name="frmSubmit" id="frmSubmit" value="Submit" /></span>
        <span style="float:right;" id="MsgDemoForm"></span>
      </div>
    </fieldset>
  </form>

</div>