将屏幕移动到焦点区域html5

Posted 2023-03-14

【中文标题】将屏幕移动到焦点区域html5

【英文标题】：Moving screen to focused area html5

【发布时间】：2014-06-04 10:10:58

【问题描述】：

我有一个 html5 表单和一个提交按钮（原来的，我知道）。 当用户错误填写表单并按下 html 标签时，焦点转到第一条错误消息。这是意料之中的良好行为，一切都很好。 但是，当用户在 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 和 ，所需的元素都会获得焦点，但是当我使用按钮时，屏幕只会移动到该元素.按下去时如何让屏幕移动？

可以请一些巫师帮助我吗？任何想法表示赞赏！

【参考方案1】：

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

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

【讨论】：

当我有一个带有 id 的输入元素时，为什么我需要一个锚点？焦点在正确的对象上，屏幕只是不动。

锚点应该让屏幕移动。我只是在权衡我的一个想法。

是的，我已经尝试将屏幕移动到显示错误的输入，$("window").scrollTop($(':focus').offset().top);这会将视口移动到该位置。但我想让焦点表现得非常糟糕。我不想手动移动屏幕。不过，这绝对不是一个坏主意，只是不是一个真正的解决方法或这些奇怪东西的原因。