表单控件不可聚焦
Posted
技术标签:
【中文标题】表单控件不可聚焦【英文标题】：form control not focusable 【发布时间】：2020-08-16 10:27:41 【问题描述】：我有一个横跨两页的表格。我正在尝试验证电子邮件地址，但是每当我输入错误的电子邮件时，我都会在控制台中收到一个错误，提示无效的
测试sn-p的最简单方法：
-
名字和姓氏留空
为电子邮件地址输入一个字母
点击下一步
点击提交
检查控制台是否有错误消息
这个 *** 回答 not focusable 不回答这个问题。电子邮件输入没有“REQUIRED”，所有按钮都有 type='BUTTON' 除了提交但有一个与之关联的点击功能。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.sustainablewestonma.org/swag/public/css/getInvolved001.css?test1=apple">
<div id='container'>
<div id='section-container'>
<div id='section1' class='sections'>
<div id='section1b'>
<span class='majCap'>Get Involved</span>
<span class='minCap'>Enter your details below</span>
<form action='getInvolvedCtrl.php' method='POST' id='myForm' onsubmit="return mySubmit(event)">
<div class='columns'>
<input class='detailsC' type="text" name="fname" placeholder="First Name" id='fname'>
<input class='detailsC' type="text" name="lname" placeholder="Last Name" id='lname'>
<input class='detailsC' type="email" name="email" placeholder="Email..." id='email'>
</div>
<div class='rowsDet'>
<span class='detailsR'><input type="checkbox" name="wres">Weston Resident</span>
<span class='detailsR'><input type="checkbox" name="news">Quarterly Newsletter</span>
</div>
<div class='spacer'></div>
<span class="minCap" >Areas of Interests</span>
<div class='rowsInt'>
<div class="columns">
<span><input type="checkbox" name="energy-int">Energy</span>
<span><input type="checkbox" name="recycling-int">Recycling</span>
<span><input type="checkbox" name="composting-int">Composting</span>
<span><input type="checkbox" name="transport-int">Transportation</span>
</div>
<div class="columns">
<span><input type="checkbox" name="climate-int">Climate</span>
<span><input type="checkbox" name="trees-int">Trees</span>
<span><input type="checkbox" name="pollinators-int">Pollinators</span>
<span><input type="checkbox" name="water-int">Water</span>
<span><input type="checkbox" name="other-int">Other</span>
</div>
</div>
<button id='next' type='button' onclick="nextPage()">next</button>
</div>
<div id='section2' class='sections'>
<span class='minCap' >Current Campaign Information:</span>
<div class='rowsCam'>
<div class="columns">
<span><input type="checkbox" name="cleanup-cpg">Town Cleanup</span>
<span><input type="checkbox" name="pollinators-cpg">Pollinators</span>
</div>
<div class="columns">
<span><input type="checkbox" name="gas-cpg">Gas Leaks</span>
<span><input type="checkbox" name="cca-cpg">CCA</span>
</div>
</div>
<div class='spacer2'></div>
<input type="submit" value="SUBMIT">
<button id='back' type='button' onclick="backPage()">back</button>
</form>
</div>
</div>
</div>
</div>
<script>
function nextPage()
var section1b = document.getElementById('section1b');
section1b.style.display='none';
var section2 = document.getElementById('section2');
section2.style.display='block';
function backPage()
var section1b = document.getElementById('section1b');
section1b.style.display='block';
var section2 = document.getElementById('section2');
section2.style.display='none';
function mySubmit(x)
event.preventDefault();
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var email = document.getElementById('email').value;
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w2,3)+$/;
if(!email.match(mailformat))email="";
if(fname == "" || lname == "" || email == "")
alert("Please enter name and email");
backPage();
return false;
else
//var myForm = document.getElementById('myForm');
//myForm.submit();
return true;
</script>
</body>
</html>【问题讨论】：
这能回答你的问题吗？ An invalid form control with name='' is not focusable 【参考方案1】：您只需更改一行代码：-
你必须设置**<input type="text" />** 而不是<input type="email" />
所以，更新后的行将是：-
<input class='detailsC' type="text" name="email" placeholder="Email..." id='email'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.sustainablewestonma.org/swag/public/css/getInvolved001.css?test1=apple">
<div id='container'>
<div id='section-container'>
<div id='section1' class='sections'>
<div id='section1b'>
<span class='majCap'>Get Involved</span>
<span class='minCap'>Enter your details below</span>
<form action='getInvolvedCtrl.php' method='POST' id='myForm' onsubmit="return mySubmit(event)">
<div class='columns'>
<input class='detailsC' type="text" name="fname" placeholder="First Name" id='fname'>
<input class='detailsC' type="text" name="lname" placeholder="Last Name" id='lname'>
<input class='detailsC' type="text" name="email" placeholder="Email..." id='email'>
</div>
<div class='rowsDet'>
<span class='detailsR'><input type="checkbox" name="wres">Weston Resident</span>
<span class='detailsR'><input type="checkbox" name="news">Quarterly Newsletter</span>
</div>
<div class='spacer'></div>
<span class="minCap">Areas of Interests</span>
<div class='rowsInt'>
<div class="columns">
<span><input type="checkbox" name="energy-int">Energy</span>
<span><input type="checkbox" name="recycling-int">Recycling</span>
<span><input type="checkbox" name="composting-int">Composting</span>
<span><input type="checkbox" name="transport-int">Transportation</span>
</div>
<div class="columns">
<span><input type="checkbox" name="climate-int">Climate</span>
<span><input type="checkbox" name="trees-int">Trees</span>
<span><input type="checkbox" name="pollinators-int">Pollinators</span>
<span><input type="checkbox" name="water-int">Water</span>
<span><input type="checkbox" name="other-int">Other</span>
</div>
</div>
<button id='next' type='button' onclick="nextPage()">next</button>
</div>
<div id='section2' class='sections'>
<span class='minCap'>Current Campaign Information:</span>
<div class='rowsCam'>
<div class="columns">
<span><input type="checkbox" name="cleanup-cpg">Town Cleanup</span>
<span><input type="checkbox" name="pollinators-cpg">Pollinators</span>
</div>
<div class="columns">
<span><input type="checkbox" name="gas-cpg">Gas Leaks</span>
<span><input type="checkbox" name="cca-cpg">CCA</span>
</div>
</div>
<div class='spacer2'></div>
<input type="submit" value="SUBMIT">
<button id='back' type='button' onclick="backPage()">back</button>
</form>
</div>
</div>
</div>
</div>
<script>
function nextPage()
var section1b = document.getElementById('section1b');
section1b.style.display = 'none';
var section2 = document.getElementById('section2');
section2.style.display = 'block';
function backPage()
var section1b = document.getElementById('section1b');
section1b.style.display = 'block';
var section2 = document.getElementById('section2');
section2.style.display = 'none';
function mySubmit(x)
event.preventDefault();
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var email = document.getElementById('email').value;
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w2,3)+$/;
if (!email.match(mailformat)) email = "";
if (fname == "" || lname == "" || email == "")
alert("Please enter name and email");
backPage();
return false;
else
//var myForm = document.getElementById('myForm');
//myForm.submit();
return true;
</script>
</body>
</html>也可以在这里查看我的解决方案 -
https://codepen.io/pen/?editors=1010
【讨论】：
感谢我的支持，但我在表单上使用 novalidate 找到了更好的答案以上是关于表单控件不可聚焦的主要内容，如果未能解决你的问题，请参考以下文章
TinyMCE - name='content' 的无效表单控件不可聚焦
name='' 的无效表单控件不可聚焦。没有任何必需或隐藏的输入
name='' 的无效表单控件不可聚焦错误 Material ui input type file