2012-06-01 230 views
18

如何將焦點設置爲隱藏文本框元素?使用Javascript將焦點設置爲隱藏文本框字段

我嘗試使用

document.getElementById("textControl_fd_component_JSON_TASK_NStext64").focus; 

但是,當我提出這個領域看得見,這並不在這裏

alert(document.activeElement.id); returns null. 

工作,上面的腳本工作的罰款。

任何猜測我錯了嗎?

+0

我想你已經證明,你不能把焦點放在隱藏的領域,這是有道理的。你可以擴展爲什麼要這樣做?可能會有更好的方法。 –

回答

39

如果你真的需要做到這一點,使框透明,不隱:

opacity:0; 
filter:alpha(opacity=0); 

另外,如果你想確保用戶不小心點擊它,只需將裏面輸入DIV與

width: 0; 
overflow: hidden; 

然而,有肯定是一個更好的方式做你想做的,也許使用​​/keypress事件。

+0

非常感謝,你只是在幾個小時的掙扎中拯救了我:) – Bren

+0

這很好,理想情況下會有一個'focusable'屬性,你可以放在未顯示的('display:none;')DOM節點上,這將允許它們獲得焦點(不管是否有任何javascript來處理這個問題,並讓用戶可見)。 – AJP

+0

有沒有這種行爲的官方參考?這是否也適用於'visibility:hidden'?或者只是'display:none'? – jbyrd

0

使用Apsillers答案,我的設置爲參與此相同的情況:

  1. 與位置父DIV:相對的;
  2. 子表單元素position:absolute;的z-index:0;不透明度:0;濾波器:α(不透明度= 0);
  3. 第二個子元素位置:絕對; z-index :(值> 0)(定位爲覆蓋透明輸入)。

Aspillers的回答是給出問題的答案是正確的,但我想給出一個實際的例子,說明何時這是必要的。

具體來說,如果您使用任何形式的「花哨」輸入(即無線電/檢查元素,選擇元素)的腳本/插件,可以隱藏表單元素。但是,如果你的腳本或插件寫得不好,它可以消除鍵盤的可訪問性。通過允許所有元素具有焦點來保持表單的流動可以爲網站用戶節省許多麻煩。

0

如果您需要解決方法並且無法更改不透明度attr,則可以添加一些js。

/* bind a click handler to your trigger */ 
jQuery('#your-search-trigger').on('click', function searchIconEventhandler (event) { 
    /* in case your field is fading, cheat a little (check css transition duration) */ 
    setTimeout (function timeoutFunction() { 
     /* show the cursor */ 
     jQuery('#your-search-input').focus(); 
    }, 100); 
}); 
相關問題