iOS Safari/Chrome 不会向上滚动以在无线电输入上显示验证错误消息

Posted

技术标签:

【中文标题】iOS Safari/Chrome 不会向上滚动以在无线电输入上显示验证错误消息【英文标题】:iOS Safari/Chrome won't scroll up to show validation error message on radio input 【发布时间】:2019-10-01 21:06:40 【问题描述】:

我正在为需要适合移动设备的客户设置调查问卷。

当表单被提交/验证,并且没有回答问题时,它会滚动到第一个无效字段 - 无论是文本输入还是无线电输入。这仅适用于桌面浏览器和 android

ios Safari/Chrome 上,文本输入按原样工作,就像在桌面浏览器和 Android 上一样。

但对于单选输入,它会关注尚未回答的问题并显示验证错误消息,但如果焦点问题不在当前显示中,则不会向上滚动到焦点问题。

This question has been asked,但从未得到答复。 有解决办法吗?

        <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>

【问题讨论】:

顶一下,因为我还需要一个答案。 【参考方案1】:
<input onFocus=(e) => 
                                                                document.getElementsByName(e.target.name)[0].scrollIntoView(
                                                                    behavior: 'smooth',
                                                                    block: 'center',
                                                                    inline: 'start',
                                                                );
                                                            

【讨论】:

【参考方案2】:

由于 OP 仍在寻找解决方法,而我也在积极寻找解决方案,以下是我目前的解决方法:

首先我测试是否使用 iPhone/iPad(请检查下面的注释),然后将 EventListeners 附加到监控焦点事件的收音机和复选框输入。由于焦点已正确设置在第一个无效输入上,剩下要做的就是将该输入滚动到可见区域。

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"
            );
        )
    )

注意:因为 iPadOS (/^iPad|iPhone$/.test(navigator.platform)) 似乎不再工作了。 Tell iPadOS from macOS on the web 列出了解决方案,但由于我目前没有能够运行 iPadOS 的 iPad,我还无法测试它们。

【讨论】:

【参考方案3】:

你可以使用 JQuery

$.scrollTo($('#myDiv'), 1000)

【讨论】:

当然有很多方法可以使用 javascript/jquery 来实现。希望有一种解决方案可以使其在 Safari 中运行,而无需自定义代码。也许没有,但是 .. Safari 适用于所有其他输入类型似乎很疯狂,并且只是让这个巨大的错误在单选按钮上存在多年。

以上是关于iOS Safari/Chrome 不会向上滚动以在无线电输入上显示验证错误消息的主要内容,如果未能解决你的问题,请参考以下文章

iOS Safari/Chrome - 在模式内聚焦输入时不需要的滚动

关闭操作表时,ios tableview不会向上滚动

iOS:向上滚动以刷新

Flexbox 不尊重 overflow-x: hidden on body (Safari / iOS webkit)

Safari/Chrome (Webkit) - 无法隐藏 iframe 垂直滚动条

jQuery Sortable List - 排序时滚动条跳起来