iOS Safari/Chrome无法向上滚动以在无线电输入上显示验证错误消息 [英] iOS Safari/Chrome won't scroll up to show validation error message on radio input
本文介绍了iOS Safari/Chrome无法向上滚动以在无线电输入上显示验证错误消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为需要移动友好的客户设置调查问卷.
I'm setting up a questionnaire for clients that needs to be mobile-friendly.
提交/验证表单后，如果未回答问题，它将滚动到第一个无效字段-无论是文本输入还是单选输入.这仅适用于台式机浏览器和Android.
When the form is submitted/validated, and a question is not answered, it scrolls to the first invalid field - whether it is a text input or radio input. This is only on desktop browsers and Android.
在iOS Safari/Chrome上，文本输入可以正常工作，就像在台式机浏览器和Android上一样.
On iOS Safari/Chrome, the text input works as is should, just like on desktop browsers and Android.
但是对于无线电输入，它将重点放在尚未回答的问题上并显示验证错误消息，但是如果不在当前显示中，则不会向上滚动到重点问题.
But for radio inputs, it focuses on the question that hasn't been answered and shows the validation error message, but does not scroll up to the focused question if it is not in the current display.
已提出问题，但从未得到回答.有解决方法吗?
This question has been asked, but was never answered. Is there a workaround for this?
<form name="myForm" id="myForm"method="post">
<div class="form-row" id="info">
<div class="col-md-3 mb-3">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" value="Tony Stark" required>
</div> <!-- NAME -->
<div class="col-md-3 mb-3">
<label for="company">Company</label>
<input type="text" class="form-control" id="company" placeholder="Company" value="Stark Industries">
</div> <!-- COMPANY -->
<div class="col-md-3 mb-3">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="Address" value="10880 Malibu Point" required>
</div> <!-- ADDRESS -->
<div class="col-md-3 mb-3">
<label for="address2">Apt / Suite / Other (Optional)</label>
<input type="text" class="form-control" id="address2" placeholder="Apt / Suite / Other">
</div> <!-- ADDRESS2 -->
</div>
<div class="form-row" id="citystzip">
<div class="col-md-6 mb-3">
<label for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="City" value="Malibu" required>
</div> <!-- CITY -->
<div class="col-md-3 mb-3">
<label for="state">State</label>
<select class="form-control" id="state" placeholder="State" value="CA" required>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="DC">DC</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select>
</div> <!-- STATE -->
<div class="col-md-3 mb-3">
<label for="zip">Zip</label>
<input type="text" class="form-control" id="zip" placeholder="Zip" value="90265" required>
</div> <!-- ZIP -->
</div>
<div class="form-row" id="contact">
<div class="col-md-7 mb-3">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" value="tony@starkindustries.com" required>
</div> <!-- EMAIL -->
<div class="col-md-5 mb-3">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" id="phone" placeholder="Phone Number" value="678-136-7092" required>
</div> <!-- PHONE -->
</div>
<h1>Please answer all survey questions and click submit at the bottom to submit <br>your updated information and survey answers.</h1>
<legend>1. Question 1</legend>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation1" name="question1" value="1a" required>
<label class="custom-control-label" for="customControlValidation1">1a</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="question1" value="1b" required>
<label class="custom-control-label" for="customControlValidation2">1b</label>
</div>
<legend>2. Question 2</legend>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="question2" value="2a" required>
<label class="custom-control-label" for="customControlValidation3">2a</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation4" name="question2" value="2b" required>
<label class="custom-control-label" for="customControlValidation4">2b</label>
</div>
<legend>3. Question 3</legend>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation5" name="question3" value="3a" required>
<label class="custom-control-label" for="customControlValidation5">3a</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation6" name="question3" value="3b" required>
<label class="custom-control-label" for="customControlValidation6">3b</label>
</div>
<legend>4. Question 4</legend>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation7" name="question4" value="4a" required>
<label class="custom-control-label" for="customControlValidation7">4a</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation8" name="question4" value="4b" required>
<label class="custom-control-label" for="customControlValidation8">4b</label>
</div>
<legend>5. Question 5</legend>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation9" name="question5" value="5a" required>
<label class="custom-control-label" for="customControlValidation9">5a</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation10" name="question5" value="5b" required>
<label class="custom-control-label" for="customControlValidation10">5b</label>
</div>
<legend>6. Question 6</legend>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation11" name="question6" value="6a" required>
<label class="custom-control-label" for="customControlValidation11">6a</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation12" name="question6" value="6b" required>
<label class="custom-control-label" for="customControlValidation12">6b</label>
</div>
<legend>7. Question 7</legend>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation13" name="question7" value="7a" required>
<label class="custom-control-label" for="customControlValidation13">7a</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation14" name="question7" value="7b" required>
<label class="custom-control-label" for="customControlValidation14">7b</label>
</div>
<legend>8. Question 8</legend>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation15" name="question8" value="8a" required>
<label class="custom-control-label" for="customControlValidation15">8a</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation16" name="question8" value="8b" required>
<label class="custom-control-label" for="customControlValidation16">8b</label>
</div>
推荐答案
由于OP仍在寻找解决方法，而我一直在积极寻找解决方案，因此，这是我目前的解决方法:
Since OP is still looking for a workaround and I was actively looking for a solution, here is my current workaround:
首先，我测试是否使用了iPhone/iPad(请检查下面的注释)，然后将EventListeners附加到用于监视焦点事件的单选框和复选框输入中.由于焦点已正确设置在第一个无效输入上，因此剩下要做的就是将输入滚动到可见区域.
First I test if an iPhone/iPad is used (please check the note below), then attach EventListeners to the radio and checkbox inputs that monitor the focus event. Since the focus is set correctly on the first invalid input, the only thing left to do is to scroll that input into the visible area.
if (/^iPad|iPhone$/.test(navigator.platform)) {
var inputs = form.querySelectorAll('input[type="radio"], input[type="checkbox"]');
inputs.forEach(i => {
i.addEventListener('focus', function (e) {
e.target.scrollIntoView({
block: 'center',
behavior: "smooth"
});
})
})
}
注意:由于iPad OS (/^ iPad | iPhone $/.test(navigator.platform))似乎不再起作用.从网络上的macOS告诉iPadOS 列出了解决方案，但由于我目前没有能够运行iPadOS的iPad，但无法对其进行测试.
Note: Since iPadOS (/^iPad|iPhone$/.test(navigator.platform)) doesn't seem to work anymore. Tell iPadOS from macOS on the web lists solutions for this, but since I currently don't have an iPad which is able to run iPadOS I couldn't test them yet.
这篇关于iOS Safari/Chrome无法向上滚动以在无线电输入上显示验证错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
