0
フォームのリストを作成して無効にし、フォーカスのあるフォームのみを有効にしようとしています。その1つのフォームをスクロールすると、次のフォームのフォーカスが無効になります。ここに私が迷惑をかけているコードがあります：スクロールしてフォーカスのない要素を非表示にする
（私が以下のコードを投稿したのは、各フォーム要素が現在フォーカスがないときに無効になっていないからです。フォーカスと他の人にあなたが
「市場survery」のようなものを選択した場合
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>あなたは、私がここにaobut話しているかを見ることができます）無効にします
TLDR：
は、どのように（1つの焦点にある時に有効にだけフォームを）スクロールに直視していない無効のフォームをご作るのですか？
編集
私は、おかげでfelixmoshするイベントリスナースクロールソリューションを使用することができました。ここに私の変更されたコードがあります。スティルはそれを少し微調整が、私はそう他の誰もそれで遊んことができ、それを投稿するつもりです：
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>
SO投稿の最終目標は質問です。あなたは何ですか？提供されたコードにいくつかの特定の問題がありますか、またはあなたがこのプロジェクトでやっていることを私たちに知ってほしかっただけですか？ – Teemu
'window.addEventListener（ 'scroll'、function（e）{}）'やそこから入手可能なスパイスクロールlibを使用してイベントをリッスンする多くのオプションがあります – felixmosh
@ felixmoshありがとうございます、探しています。私はまだ、どちらが特に焦点を当てているかをどのようにして判断するかについて、ちょっと混乱しています。しかし、私はそれをいじるしようとします。 @テム私は一度に1つのフォームを表示したかったことを明確にしようと思った。私が投稿したコードは、私がそれを使って作業しているもので、私がまだ望んでいないものでした。投稿したリンクは、私が何をしたいのかを示しています。混乱を避けるためにTLDRを追加しました。 – user2177927