Question

我正在尝试制作表单列表并禁用它们，并且只启用了焦点表单。然后向下滚动时禁用一个表单并启用下一个焦点表单。这是我正在搞乱的代码：

（我在下面发布代码的原因是，当不在焦点时，每个表单元素当前都没有被禁用。我希望在聚焦时只启用一些元素，而其他元素被禁用）

function SubmitName() {
  var form = document.getElementById("InputName");
  var elements = form.elements;
  for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = true;
  }
}

.body {}

.buttonTans {
  width: 80px;
  height: 50px;
  background: grey;
  -webkit-transition: width .5s;
  /* For Safari 3.1 to 6.0 */
  transition: width .5s;
}

.buttonTans:hover {
  width: 100px;
}

.formsize {
  height: 50px;
  font-size: 25px;
}

.ResizeForms {
  width: 120px;
}

.ResizeForms:hover {
  -webkit-transition: width .5s;
  /* For Safari 3.1 to 6.0 */
  transition: width .5s;
  width: 150px;
}

<form id="InputName">
  First name:<br>
  <input id="firstname" class="ResizeForms formsize" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms formsize" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName2">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName3">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName4">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName5">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName6">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName7">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName8">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName9">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>
<form id="InputName10">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname"><br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

如果你选择“市场情绪”这样的话，你可以看到我在说什么

https://admin.typeform.com/gallery/workspaces/11216029#/

TLDR：

如何在不直接查看滚动时禁用表单（一个或只是在聚焦时启用的表单）？

编辑

我设法使用事件监听器滚动解决方案感谢felixmosh。这是我修改过的代码。 Stille稍稍调整一下，但我会发布它，所以其他人也可以玩它：

function SubmitName() {
  var form = document.getElementById("InputName");
  var elements = form.elements;
  for (i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = true;
  }
}


var yPositionForm = new Array(10); //array which stores yposition of each form
var formIdName = ["InputName", "InputName2", "InputName3", "InputName4", "InputName5", "InputName6", "InputName7", "InputName8", "InputName9", "InputName10"];

function findTop(element) {
  var rec = document.getElementById(element).getBoundingClientRect();
  return rec.top;
}

function findFormPositions() {
  for (var k = 0; k <= yPositionForm.length - 1; k++) {
    yPositionForm[k] = findTop(formIdName[k]);
  }
}

function disableFormElements() {

  var formName = formIdName[0];
  var formString = formIdName[0];

  var j = 0;

  while (j <= formIdName.length - 1) {
    var form = document.getElementById(formIdName[j]);
    var elements = form.elements;
    for (i = 0, len = elements.length; i < len; ++i) {
      elements[i].disabled = true;
      elements[i].style.opacity = 0.5;
    }
    j++;
  }

  //do something here to mess with opacity
}

function disableAllButTop() {

  var formName = formIdName[0];
  var formString = formIdName[0];

  var j = 1;

  while (j <= formIdName.length - 1) {
    var form = document.getElementById(formIdName[j]);
    var elements = form.elements;
    for (i = 0, len = elements.length; i < len; ++i) {
      elements[i].disabled = true;
      elements[i].style.opacity = 0.5; //do something here to mess with opacity
    }
    j++;
  }
}


disableAllButTop(); //start with all forms disabled but the first one

var last_known_scroll_position = 0;
var ticking = false;



function doSomethingOnScroll(scroll_pos) {
  // do something with the scroll position
  disableFormElements();
  findFormPositions();

  for (var k = 0; k <= yPositionForm.length - 1; k++) {
    if (yPositionForm[k] <= scroll_pos + 315 && yPositionForm[k] >= scroll_pos - 80) {
      EnableForum(formIdName[k]);
    }
  }
}

function EnableForum(name) {
  var form = document.getElementById(name);
  var elements = form.elements;
  for (i = 0, len = elements.length; i < len; ++i) {
    elements[i].disabled = false;
    elements[i].style.opacity = 1; //do something here to mess with opacity
  }
}

window.addEventListener('scroll', function(e) {

  last_known_scroll_position = window.scrollY;

  if (!ticking) {

    window.requestAnimationFrame(function() {
      doSomethingOnScroll(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;

  }

});

.body {}

.testVisible.visible {
  display: block;
}

.buttonTans {
  width: 80px;
  height: 50px;
  background: grey;
  -webkit-transition: width .5s;
  /* For Safari 3.1 to 6.0 */
  transition: width .5s;
}

.buttonTans:hover {
  width: 100px;
}

.formsize {
  height: 50px;
  font-size: 25px;
}

.ResizeForms {
  width: 120px;
}

.ResizeForms:hover {
  -webkit-transition: width .5s;
  /* For Safari 3.1 to 6.0 */
  transition: width .5s;
  width: 150px;
}

<form id="InputName" class="testVisible">
  First name:<br>
  <input id="firstname" class="ResizeForms formsize" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms formsize" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

<form id="InputName2">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName3">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName4">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

<form id="InputName5">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

<form id="InputName6">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName7">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

<form id="InputName8">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName9">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>


<form id="InputName10">
  First name:<br>
  <input id="firstname" class="ResizeForms" type="text" name="firstname"><br> Last name:<br>
  <input id="lastname" class="ResizeForms" type="text" name="lastname">
  <br>
  <input id="submitName" class="buttonTans" type="button" value="Submit" onclick="SubmitName()">
</form>

Answer 1

有许多选项可以监听其中一个正在使用的滚动事件 scroll event，其他人ColoringPage可以使用任何可用的间谍滚动库来完成。

在滚动时隐藏元素而不是焦点

1 个答案: