JS教程:如何製作表單自動聚焦的網頁

來源:互聯網
上載者:User

導讀:表單聚焦看似一個很小的功能,但也能提高網站的使用者體驗,當然用JS實現十分簡單,本文主要從最基本開始分析如何製作表單自動聚焦的頁面。

在登陸介面中,通常,最重要的部分為登陸的Form表。一個非常棒的提升體驗的做法是,在載入頁面時自動聚焦到第一個提供使用者輸入的表單框,讓使用者不用再多一個點擊,就可以輸入。這被很多網站採用。比如維基百科就是這樣:

當然,自動聚焦不僅僅適合在登陸介面,而適合在任何需要的介面。比如WordPress登陸背景介面和支付寶的登陸介面,都採用了自動聚焦的方法。

而具體應該是怎樣實現的呢?假設我們的表單如下:

<form id="signin" method="post" name="signin" action="http://www.happinesz.cn">
<input value="hidefor" type="hidden" name="hide" />
<input id="usr" name="usr" />
<input id="pwd" type="password" name="pwd" />
<input id="smbt" value="submit" type="button" name="smbt" />
</form>

我們要讓焦點落在id="usr"的input上,用 Javascript 的方法,我們可以這樣做:

document.forms["signin"].elements["usr"].focus();

這裡是當我們明確知道要在那個表單上添加 focus 的時候可以用的方法。這裡,elements也可以用方括弧的方法來擷取input表單,比如.elements[0]即為第一個input表單。當我們要聚焦的 input前面有type="hidden"的隱藏input,由於隱藏的input是不支援.focus的,一旦應用其上,就會出現Javascript錯誤,要避免這樣的的錯誤。我們可以搜尋第一個表單中,第一個非隱藏的 input,並給加上.focus:(除非你是想封裝起來,自動判斷,不然,最好不要用這個方法,多浪費資源啊,又if又for的)

window.onload = function(){
if(document.forms.length>0){
  for(i=0;i<document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!="hidden"){
    oInput.focus();
    return;
   }
  }
}
}

到這裡,很多網站都只做到這裡,比如我前面提到的Wordpress的登陸介面和支付寶的登陸介面。他們的目標的相同的,提升使用者體驗。我的目標也這樣。但是,這有時候,這並不一定提升了使用者體驗。為什麼呢?

想想,你是不是也曾出現過這樣的狀況:當時,你的網速並不快,你進入www.alipay.com的時候,還沒有自動聚集,因為JS還沒載入。但,你已經輸入使用者名稱了,並且已經在輸入密碼。好,打住。我們來講個故事:很久很久以前,有個叫sofish,他當時掛著迅雷在下載XXX東西,急著想要用支付寶,當時頁面還沒有載入完,輸入使用者名稱後,正準備輸入密碼(習慣性地用鍵盤上的TAB鍵來切換到密碼框),然後,抬頭,當時,密碼出現在輸入使用者名稱的框上,並且,旁邊有一同學正在那裡看著。

你看,你看,難道,這樣的自動聚焦提升了使用者的所謂的體驗麼? 這裡,就往往相反,可能導致使用者要重新改密碼(比如那個當時RP比較低下的叫sofish的傢伙)。

有什麼方法可以解決嗎?當然!我們把上面的代碼改裝如下:

window.onload = function(){
if(document.forms.length>0){
  for(i=0;i<document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!="hidden" && oInput.value==0){
    oInput.focus();
    return;
   }
  }
}
}

但是,這樣一來,這個聚集就會自動跳到下一個非隱藏的input中,如果我正在輸入,那不是很不爽? 嗯,當然不爽,所以,我們再折騰一下,做點小改正:

window.onload = function(){
if(document.forms.length>0){
  for(i=0;i<document.forms[0].elements.length; i++){
   var oInput = document.forms[0].elements[i];
   if(oInput.type!="hidden" && oInput.value.length>0){
     oInput.blur();
     return;
   }else if(oInput.type!="hidden"){
    oInput.focus();return
    }
  }
}
}

由於在oInput.type!="hidden"中有一種情況,即當使用者已經輸入的時候,他會自動聚集到下一個,這樣,也有問題,所以,我們讓如果已經有輸入的情況下,去掉所有input的焦點,而 else if中才讓沒有輸入的使用者自動對焦到第一個。(當然,如果有人習慣先輸入密碼,再輸入使用者名稱,那就再另想辦法吧)。

其實,這樣,有時候好用,但有時候相當於根本不去自動聚焦。不過,對於保護使用者的輸入(特別是密碼)來說,我想,用改進的方法,會比無改進的自動聚焦和根本不自動聚集來得好。當然,我相信,會有更好的方法。請不吝賜教。其他的就讓我這個愛折騰的JS編程學院新生慢慢發現吧。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。