停止偷取焦點而不阻止組合框打開

我有一個文本框。當用戶關注文本框時，我會提供一個幫助程序來幫助他們填充文本框。當文本框模糊時，幫助程序會消失。停止偷取焦點而不阻止組合框打開

問題是，幫手現在需要包含一個組合框（它是一個普通的select標籤）。之前爲了允許用戶與助手交互而不失焦，我們在mousedown事件上使用了preventDefault（）。但是，似乎組合框的打開處理程序是mousedown上的默認事件。因此，如果我們阻止默認，組合框忽略用戶的點擊。如果我們不阻止Default，那麼組合框會打開一個納秒，然後這個字段失去焦點，此時幫助器會消失，包括剛打開的組合框。

我該如何阻止該領域失去焦點，但仍然允許用戶與組合框交互？

編輯：我真的寧願避免輸入失去焦點。當輸入不集中時，幫手的其他功能沒有意義。即使輸入沒有集中，但我決定不想這樣做，我認爲在單擊組合框後單擊顯示助手。

來源

2015-11-11 Puppy

小提琴會更有幫助。 – rajuGT

和 – JNF

問題中的代碼我實際上並不知道如何使用普通的DOM API來有條件地渲染那樣; p – Puppy

你實際上可以用純CSS實現這一點。將兩者都包含在包裝中並在:focus上顯示它們 - 請注意，您還可以使用+運算符選擇DOM兄弟。

select { 
    display: block; 
    visibility: hidden; 
    transition: visibility 50ms; 
} 
textarea:focus + select, 
select:focus { 
    visibility: visible; 
}

的transition防止select接收來自焦點之前被隱藏。

這是一個JSFiddle演示上述代碼。

編輯：

顯然，你希望讓用戶處理select沒有它獲得焦點。但是，一旦瀏覽器失去焦點，瀏覽器會立即關閉它，所以唯一的解決方案是使用自動關閉的自定義選擇部件。

來源

2015-11-11 09:29:13

你需要'select'的父親作爲好吧，我知道這是一個整體形式 – JNF

嗯，不一定 - 知道他們是兄弟姐妹就足夠了，但是，有專門的包裝可能更安全。 –

做得很好... +1 –

您可以從組合框本身複製顯示/隱藏功能，因此如果選擇了組合框，助手會保留。

使用jQuery它看起來像：

$("input, select").focus(function(){ 
    $("div").show(); 
}); 
$("input, select").blur(function(){ 
    $("div").hide(); 
});

fiddle

來源

2015-11-11 09:37:50 JNF

我已經考慮過這一點，但我確實很想避免輸入失去焦點，因爲它會損害用戶使用助手的能力。助手的一些功能就像「在選擇時插入文本」，如果他們沒有專注於框中，這是沒有用的。 – Puppy

停止偷取焦點而不阻止組合框打開

回答

相關問題