将组的第一个表单字段设置为div的onfocus

我不确定我的标题是否正确地描述了我的问题。

我正在构建一个自定义的电话号码'字段'在我的网站上的一个表单，这实际上是由10个单独的字段(数字)，所有分组在一个特定的div (Id=numberContainer)。

目前，我正在使用一些脚本来强制光标从第一个字段(Id=userPhone_digit-01)开始，无论用户单击组中的哪个字段。

在每个字段中输入数据后，代码还将光标移动到下一个"数字"。

到目前为止，代码似乎工作得很好。

然而，我想扩展或修改代码，有光标也开始在第一个字段(Id=userPhone_digit-01)当用户单击在任何地方在整个div (Id=numberContainer)或div内的任何元素。

我尝试了一些"调整"，包括一些"聚焦"的东西。但是到目前为止，我似乎什么都不能做。

我已经包含了一个非常精简的表单版本，只包含'电话号码'字段。

我还在"head"部分留下了CSS的链接。

我省略了我在调整代码时失败的尝试，只留下了当前工作的内容。

如果有人有任何建议，我将不胜感激。

谢谢,麦迪森HTML

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.jamiesexton.com/css/forcefield3.css">
</head>
<body>

<div class="pageContainer">
<div class="blankSpace"></div>
<div class="formContainer">
<form id="requestForm" action="/formHandler.php" method="post" enctype="multipart/form-data">

<div class="center_Wrapper">
<div class="formHeader">- THE FORM -</div>
</div>

<div class="phoneNumber_Container">
<div class="left_Wrapper">
<div class="section_Header">Phone Number</div>
<button class="phoneReset_button" title="Reset"><img src="/images/refreshbutton.png" 
width="20px" height="20px"></button>
</div>

<!-- //////////////////// Start 'numberContainer' Div //////////////////// -->

<div Id="numberContainer" class="phoneField_Wrapper">
<div class="leftSpace"><img 
src="https://www.jamiesexton.com/images/smallflag.jpg" width="40px" 
height="24px"></div>
<p class="plusOne">+1</p>
<p class="phoneNumber_Parentheses_Left">(</p>
<input type="number" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" 
minlength="1" maxlength="1" tabindex="2"  required>
<input type="number" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" 
minlength="1" maxlength="1" tabindex="3"  required>
<input type="number" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" 
minlength="1" maxlength="1" tabindex="4"  required>
<p class="phoneNumber_Parentheses_Right">)</p>
<input type="number" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField4" 
minlength="1" maxlength="1" tabindex="5"  required>
<input type="number" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" 
minlength="1" maxlength="1" tabindex="6"  required>
<input type="number" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" 
minlength="1" maxlength="1" tabindex="7"  required>
<p class="phoneNumber_Dash">-</p>
<input type="number" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" 
minlength="1" maxlength="1" tabindex="8"  required>
<input type="number" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" 
minlength="1" maxlength="1" tabindex="9"  required>
<input type="number" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" 
minlength="1" maxlength="1" tabindex="10" required>
<input type="number" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" 
minlength="1" maxlength="1" tabindex="11" required>
<div class="rightSpace"></div>
</div>

<!-- //////////////////// End 'numberContainer' Div //////////////////// -->
</div>


<!-- Start Force-Field/Next-Field Script -->
<script>
const
forceField  = document.querySelector('#requestForm')
, f_nums = [...forceField.querySelectorAll('#numberContainer input')]
;
forceField.oninput = e =>
{
if ( e.target.matches('#numberContainer input[maxlength="1"]')
&& e.target.value.length===1 
){
let nextOneIndx = f_nums.findIndex(el=>el===e.target) +1;
if (nextOneIndx < f_nums.length)
{
f_nums[nextOneIndx].focus();
}
else
{
let nextTab = +e.target.getAttribute('tabindex') +1;
forceField.querySelector(`[tabindex="${nextTab}"]`).focus();
}
}
}

forceField.onclick = e =>
{
if ( e.target.matches('#numberContainer input[maxlength="1"]')
&& e.target.value.length===0
){ 
let freeOne = f_nums.find(el=>el.value==='');  // find 1st input free
if (freeOne) freeOne.focus()
}
}
</script>
<!-- End Force-Field/Next-Field Script -->


<!-- Start Clear-Number-Fields Script -->
<script>
let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField,.phoneField4');
btnClear.addEventListener('click', () => {
inputs.forEach(input =>  input.value = '');
});
</script>
<!-- End Clear-Number-Fields Script -->


<div class="submitButton_Container">
<div class="center_Wrapper" ><input type="submit" class="submit__button" value="Submit"></div>
</div>
</form>
</div>
</div>   
</body>
</html>

查询numberContainer，以便添加onclick事件监听器。然后onclick获得最近的numberContainer，以防事件目标是numberContainer的子元素，然后我们可以使用数字容器元素查询第一个输入元素，如e.target.closest('#numberContainer').querySelector('#userPhone_digit-01')

当用户单击number容器元素的任意位置时，第一个输入将成为焦点。

const numCont = document.getElementById('numberContainer')
numCont.onclick = e => e.target.closest('#numberContainer').querySelector('#userPhone_digit-01').focus()

const forceField = document.querySelector('#requestForm'),
f_nums = [...forceField.querySelectorAll('#numberContainer input')];

const numCont = document.getElementById('numberContainer')
numCont.onclick = e => e.target.closest('#numberContainer').querySelector('#userPhone_digit-01').focus()

forceField.oninput = e => {
if (e.target.matches('#numberContainer input[maxlength="1"]') &&
e.target.value.length === 1
) {
let nextOneIndx = f_nums.findIndex(el => el === e.target) + 1;
if (nextOneIndx < f_nums.length) {
f_nums[nextOneIndx].focus();
} else {
let nextTab = +e.target.getAttribute('tabindex') + 1;
forceField.querySelector(`[tabindex="${nextTab}"]`).focus();
}
}
}

forceField.onclick = e => {
if (e.target.matches('#numberContainer input[maxlength="1"]') &&
e.target.value.length === 0
) {
let freeOne = f_nums.find(el => el.value === ''); // find 1st input free
if (freeOne) freeOne.focus()
}
}
let btnClear = document.querySelector('button');
let inputs = document.querySelectorAll('.phoneField,.phoneField4');
btnClear.addEventListener('click', () => {
inputs.forEach(input => input.value = '');
});

<link rel="stylesheet" href="https://www.jamiesexton.com/css/forcefield3.css">

<div class="pageContainer">
<div class="blankSpace"></div>
<div class="formContainer">
<form id="requestForm" action="/formHandler.php" method="post" enctype="multipart/form-data">

<div class="center_Wrapper">
<div class="formHeader">- THE FORM -</div>
</div>

<div class="phoneNumber_Container">
<div class="left_Wrapper">
<div class="section_Header">Phone Number</div>
<button class="phoneReset_button" title="Reset"><img src="/images/refreshbutton.png" 
width="20px" height="20px"></button>
</div>

<!-- //////////////////// Start 'numberContainer' Div //////////////////// -->

<div id="numberContainer" class="phoneField_Wrapper">
<div class="leftSpace"><img src="https://www.jamiesexton.com/images/smallflag.jpg" width="40px" height="24px"></div>
<p class="plusOne">+1</p>
<p class="phoneNumber_Parentheses_Left">(</p>
<input type="number" id="userPhone_digit-01" name="userPhone_digit-01" class="phoneField" minlength="1" maxlength="1" tabindex="2" required>
<input type="number" id="userPhone_digit-02" name="userPhone_digit-02" class="phoneField" minlength="1" maxlength="1" tabindex="3" required>
<input type="number" id="userPhone_digit-03" name="userPhone_digit-03" class="phoneField" minlength="1" maxlength="1" tabindex="4" required>
<p class="phoneNumber_Parentheses_Right">)</p>
<input type="number" id="userPhone_digit-04" name="userPhone_digit-04" class="phoneField4" minlength="1" maxlength="1" tabindex="5" required>
<input type="number" id="userPhone_digit-05" name="userPhone_digit-05" class="phoneField" minlength="1" maxlength="1" tabindex="6" required>
<input type="number" id="userPhone_digit-06" name="userPhone_digit-06" class="phoneField" minlength="1" maxlength="1" tabindex="7" required>
<p class="phoneNumber_Dash">-</p>
<input type="number" id="userPhone_digit-07" name="userPhone_digit-07" class="phoneField" minlength="1" maxlength="1" tabindex="8" required>
<input type="number" id="userPhone_digit-08" name="userPhone_digit-08" class="phoneField" minlength="1" maxlength="1" tabindex="9" required>
<input type="number" id="userPhone_digit-09" name="userPhone_digit-09" class="phoneField" minlength="1" maxlength="1" tabindex="10" required>
<input type="number" id="userPhone_digit-10" name="userPhone_digit-10" class="phoneField" minlength="1" maxlength="1" tabindex="11" required>
<div class="rightSpace"></div>
</div>

<!-- //////////////////// End 'numberContainer' Div //////////////////// -->
</div>


<div class="submitButton_Container">
<div class="center_Wrapper"><input type="submit" class="submit__button" value="Submit"></div>
</div>
</form>
</div>
</div>

相关内容

最新更新

热门标签：