我不确定我的标题是否正确地描述了我的问题。
我正在我的网站上的一个表单中构造一个自定义电话号码“字段”，它实际上由10个单独的字段（数字）组成，所有字段都分组在一个特定的div（Id=numberContainer）中。
目前，我使用一些脚本强制光标从第一个字段（Id=userPhone_digit-01）开始，而不管用户单击组中的哪个字段。
在每个字段中输入数据后，该代码还会将光标移到下一个“数字”。
到目前为止，代码似乎对所有这些都工作得很好。
但是，我希望扩展或修改代码，以便当用户单击整个div（Id=numberContainer）或div中的任何元素内的任何位置时，光标也从第一个字段（Id=userPhone_digit-01）开始。
我尝试了一些“调整”，包括一些“聚焦”的东西。但到目前为止，我似乎不能得到任何工作。
我已经包括了一个非常精简的版本的形式，只包含'电话号码'字段（s）。
我还在“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>

1条答案

按热度按时间

hi3rlvi21#

查询numberContainer，添加一个onclick事件监听器。然后 * onclick * 获取最接近的numberContainer，以防事件目标是***numberContainer***元素的子元素，然后我们可以使用 * number容器元素 * 查询 * first input元素 *，如e.target.closest('#numberContainer').querySelector('#userPhone_digit-01')
然后，每当用户单击数字容器元素上的任何位置时，第一个输入都将成为焦点。

const numCont = document.getElementById('numberContainer')

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

第一次

赞(0）回复(0）举报 2022-11-29

jquery 使组的第一个窗体字段在div的焦点上处于活动状态

1条答案

相关问题

热门标签

最新问答