在页面上的焦点元素中,滚动到以前的位置

分享于 

4分钟阅读

Web开发

  繁體 雙語

介绍

当同一页从服务器返回时,我们如何滚动到页面上的前一个焦点元素? 示例:如果从页面上的下拉列表中选择 below,则默认情况下第一个字段将收到焦点或者滚动位置。 它强制用户向下滚动到前面的位置,并导致许多挫折。

对于简单的隐藏字段,我们可以回到相同的位置,把焦点放在同一字段或者下一个字段。 这将允许用户从他们离开的地方继续。

FORM 标记下面添加两个隐藏字段:

<inputtype=&quot;hidden&quot; name= &quot;previousElement&quot;><inputtype=&quot;hidden&quot; name= &quot;previousScrollPosition&quot;>

script 标记或者你的 。js文件中添加这里JavaScript代码:

function sendScrollPosition() {
 document.forms[0].elements[&quot;previousScrollPosition&quot;].value = 
 document.body.scrollTop;
 returntrue;
} function setfocuselement(ele){
 if(document.forms[0] == null) returnfalse;
 if(document.forms[0].elements[&quot;previousElement&quot;]!= null) {
 document.forms[0].elements[&quot;previousElement&quot;].value=
 ele.name || event.srcElement.name;
 }
}if(document.getElementsByName(&quot;previousScrollPosition&quot;).length> 0) {
 document.body.scrollTop = 
 document.forms[0].elements[&quot;previousScrollPosition&quot;].value;
}var prvElement= document.forms[0].elements[&quot;previousElement&quot;];if(prvElement!= null && prvElement.value!= null ) {
 document.forms[0].elements[prvElement.value].focus();
}

在提交页面时,你需要调用这两个JavaScript函数。 你可以将这些JavaScript函数添加到 onchangeonblur 或者 onclick 事件中,finally 将页面提交到服务器。

服务器端

当你呈现ASP或者JSP页面时,需要同时从 Request 对象中获取 previousScrollPositionpreviousElement 值,并填充隐藏字段。

<formaction=&quot;demo_form2.asp&quot; method=&quot;post&quot;>First name:<inputtype=&quot;text&quot; name=&quot;name&quot; value=&quot;Donald&quot; /><br/>Last name:<inputtype=&quot;text&quot; name=&quot;name&quot; value=&quot;Duck&quot; /><br/><inputtype=&quot;hidden&quot; name= &quot;previousElement&quot; value=&quot;<%Request.Form(&quot;previousElement&quot;)%>&quot;> <inputtype=&quot;hidden&quot; name= &quot;previousScrollPosition&quot; value=&quot;<%Request.Form(&quot;previousScrollPosition&quot;)%>&quot;><inputtype=&quot;submit&quot; value=&quot;Submit&quot; /></form>

你需要在调用或者使用JavaScript函数之前,确保表单域在 FORM 中可用。

如果具有相同 NAME的多个字段,则需要将字段的索引发送到服务器,然后使用 document.getElementsbyName("elementName") 函数和循环来选择正确的索引并设置焦点。

setfocus 中设置焦点或者跳过隐藏或者禁用的字段是一个复杂的JavaScript操作。 我将在另一篇文章中展示。


PRE  滚动  焦点  
相关文章