फोकस() सफारी या क्रोम

Question

में काम नहीं कर रहा है एक div कि एक tabindex (क्लिक करें या करने के लिए टैब किए गए) यह निम्नलिखित करता दिया गया है, जब div केंद्रित है:

ही में, एक इनपुट सम्मिलित करता है इनपुट ध्यान केंद्रित

इस एफएफ, IE और ओपेरा

में अच्छा काम करता है लेकिन Chome/सफारी में यह इनपुट फ़ोकस देता है, लेकिन वास्तव में इनपुट अंदर कर्सर डाल करने के लिए विफल रहता है देता है (मैं इसे इसकी वजह से ध्यान केंद्रित कर देता है पता सफारी/क्रोम फोकस सीमाएं दिखाई देती हैं)।

क्या हो रहा है इसके बारे में कोई सुझाव?

मुझे इसके बाद कुंजी हैंडलर को ठीक करना होगा ताकि तीर कुंजी और बैकस्पेस कुंजी भी काम कर सकें, अगर आप चाहें तो उस पर झुकने के लिए स्वतंत्र महसूस करें।

अग्रिम धन्यवाद!

var recipientDomElem = $("#recipientsDiv"); 
recipientDomElem[0].tabIndex = 0; 
$("#recipientsDiv").focus(function(e){ 
var code = (e.keyCode ? e.keyCode : e.which); 
window.clearTimeout(statusTimer); 
recipientDivHandler(code, null); 
}); 


function recipientDivHandler(code, element){ 
$("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />'); 
$("#toInput").focus(); 
} 

इस बारे में एक और विषमता कि div करने के लिए के माध्यम से टैब div.focus() फ़ंक्शन आग और सही ढंग से इनपुट फ़ोकस दे देंगे है ... यह सिर्फ है:

यहाँ कोड का नमूना दिया गया उस पर क्लिक करें विफल रहता है। मैंने div पर एक .click() फ़ंक्शन को फोकस के समान करने की कोशिश की, लेकिन यह काम नहीं कर रहा है।

Answer 1

करने के लिए अपने समारोह को बदलने मैं अपने दम पर इस सवाल का जवाब मिल गया है की कोशिश ... यह कमजोर है, और भी आसान लग सकता है ... लेकिन यह काम करता है।

इस उत्कृष्टता के लिए तैयार ..?

बस ध्यान देने के लिए 0 का टाइमर जोड़ें ... किसी कारण से यह केवल डीओएम में इनपुट को लोड करने के लिए पर्याप्त समय देता है।

function recipientDivHandler(code, element){ 
$("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />'); 
setTimeout(function(){$("#toInput").focus();},0); 
} 

किसी और आगे इस व्याख्या करते हैं तो कर सकते हैं या एक बेहतर जवाब कृपया :-)

Answer 2

html 4.01 standard के अनुसार, टैबिंडेक्स divs पर लागू नहीं होता है।

Answer 3

आपकी समस्या यह है कि आप एक DOM ऑब्जेक्ट नहीं जोड़ रहे हैं, आप अपने पृष्ठ पर स्पष्ट HTML जोड़ रहे हैं - और मुझे संदेह है कि सफारी दृश्यों के पीछे डोम अपडेट कर रहा है। स्थानों के एक नंबर (जैसे here या here या here के रूप में) में वर्णित के रूप

, document.createElement() की तरह वास्तविक डोम तरीकों का उपयोग करने के लिए डोम करने के लिए अपने input संलग्न करने के लिए प्रयास करें, और फिर देखें कि वह सफारी समस्या बनी रहती है।

सभी ने कहा कि जिस तरह से आप उत्पन्न होने वाले मुद्दे का वर्णन करते हैं - क्लिक पर लेकिन टैब नहीं, उदाहरण के लिए - तर्क होगा कि समस्या यह नहीं होगी ... तो अब मैं उत्सुक हूं। (किसी भी घटना में, डीओएम विधियों का उपयोग करना वास्तव में तत्वों को जोड़ने का सही तरीका है, इसलिए इसे किसी भी तरह से करने का बुरा विचार नहीं है।)

Answer 4

हालांकि मुझे यह विशेष रूप से कहीं भी नहीं मिला, .focus() केवल इनपुट तत्वों पर काम करता है और लिंक। यह क्रोम और सफारी में भी ठीक से समर्थित नहीं है। मैंने आपको यह दिखाने के लिए demo here पोस्ट किया है जिसका मेरा मतलब है। यह भी ध्यान रखें कि focus() और focusin() (v1.4) के समान परिणाम हैं।

ताकि निर्धारित किया जा रहा, .click()

$("#recipientsDiv").click(function(e){ ... }) 

Answer 5

मैं नवीनतम क्रोम रिलीज के साथ एक ऐसी ही समस्या मिला मंच लेने के लिए स्वतंत्र महसूस हो रहा है, और मुझे लगता है कि मुझे पता चला मेरे में सीएसएस रीसेट था निम्नलिखित

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none; 

नतीजा यह है कि क्रोम में मैं कर सकता भी नहीं इनपुट पाठ ... फ़ायरफ़ॉक्स में यह संभव

Answer 6

रों था एट 0 या उससे अधिक है, इसकी एक ज्ञात क्रोम बग करने के लिए 'toInput' की tabindex:

http://code.google.com/p/chromium/issues/detail?id=467043