Question

我有一个html5表单和一个提交按钮（原件，我知道）当用户错误地填写表单并按下html ＆lt;按钮... /＆gt; 标记，焦点转到第一条错误消息。这是预期和良好的行为，一切都很好但是，当用户在chrome和safari上按 GO 时，焦点不会移动。

我在设置焦点后通过打印document.activeElement尝试调试当我按下go并按下表单按钮时，它会打印相同的html元素，即使按下GO时焦点不在此特定元素上。

简而言之：

按 HTML 按钮 - 使用jquery将焦点应用于所需的错误输入。奇迹般有效。
按 GO 按钮 - 使用相同的功能将焦点应用于所需的错误输入。
用户没有得到任何东西。

代码示例：

标记：

<form class="boxBody form" action="#" id="profileForm">  
    <input type="text" class="keyboardInput" id="customer-email" name="email" tabindex="1" size="28" maxlength="128">  
   //More inputs  
    <button id="profileSubmit" data-localize="{'text': 'profileBox.submit'}" tabindex="11" class="save-profile btn btn-red"></button>  
</form>

.js：

$('#profileForm').submit(function(event)
{
    event.preventDefault();
    updateProfile(event);  
//updateProfile validates the form and creates error messages
    setFocusOnUpdate();
    console.log(document.activeElement);
 //prints the same dom element.
});

并且

function setFocusOnUpdate(){
var successMessage = $(".alert-success:visible", widgetElement);  

if( successMessage.length > 0 )
{
    //Success message gets focus
    widgetElement.find("input, select").last().focus();
}
else
{               
    //First error message gets focus
    var firstVisibleAlert = $(".alert:visible", widgetElement)[0];
    $(firstVisibleAlert).parent().find("input, select").focus();
}           
}

在这两种情况下，都是 GO 和＆lt;按钮/＆gt; ，所需的元素获得焦点，但屏幕仅在我使用按钮时移动到元素。按下go时如何让屏幕移动？

有些巫师可以帮帮我吗？任何想法都赞赏！

Answer 1

您是否尝试在同一页面上使用锚点来获得所需的效果？

是否可以通过表单设置锚点，以便在您希望将焦点设置为某个输入时，通过将屏幕移动到锚点来实现？

将屏幕移动到聚焦区域html5

1 个答案: