2012-09-10 26 views
7

के तहत फोकस खोने के बाद इनपुट स्वीकार करना बंद करने के लिए संतोषजनक div को बल दें, क्रोम और सफारी (और संभवतया अन्य वेबकिट आधारित ब्राउज़र) में डिवीजन खोने के बाद भी एक संतोषजनक div में टाइप करना संभव है।वेबकिट

मैं इस मुद्दे को वर्णन करने के लिए एक सरल उदाहरण बनाया: http://jsfiddle.net/yfcsU/3/

उदाहरण दो तत्व हैं: contenteditable="true" साथ एक div और एक लिंक है कि क्लिक जाता है कि contenteditable div पर एक कलंक घटना ट्रिगर किया जाएगा।

जब लिंक क्लिक किया जाता है, तो संतोषजनक div फोकस खो देता है लेकिन आप अभी भी div में टाइप करने में सक्षम हैं और किसी भी कीप्रेस को फिर से ध्यान केंद्रित करने का कारण बन जाएगा।

यह व्यवहार फ़ायरफ़ॉक्स में अलग है जहां यह अपेक्षित कार्य करता है: लिंक पर क्लिक करने से संतोषजनक div इनपुट को स्वीकार करना बंद कर देगा।

वेबकिट में, क्या वितरित करने योग्य div को इनपुट स्वीकार करना बंद करने का कोई तरीका है जब यह div पर संतुष्ट अक्षम किए बिना ध्यान खो देता है?

+1

सच है, लेकिन फोकस रूपरेखा समाप्त हो गई है और जब आप फिर से टाइप करना शुरू करते हैं तो फोकस ईवेंट फिर से ट्रिगर होता है। – dcro

उत्तर

8

जवाब के रूप में सही चिह्नित सही वास्तव में है, लेकिन मैं एक और समाधान जोड़ देगा जो थोड़ा और अधिक सरल हो सकता है। के बाद आप contenteditable पर कलंक() फोन div आप इस कॉल करने के लिए: यहाँ

window.getSelection().removeAllRanges(); 

टेस्ट: http://jsfiddle.net/mareksuscak/oytdoxy8/

मुझे लगता है कि यह एक ही काम करता है और यह भी बताता है कि क्यों इसे सही ढंग से काम नहीं करता है - आमतौर पर चयन सीमा को इनपुट तत्वों से हटा दिया जाता है जब धुंधला होता है लेकिन यह किसी भी तरह सामग्री के लिए निष्पादित नहीं होता है। योग्य divs और इस प्रकार किसी भी चरित्र/libe ब्रेक में प्रवेश करने के बाद यह फिर से केंद्रित है।

+1

मुझे यह समाधान बेहतर लगता है क्योंकि यह सीधे डीओएम से गड़बड़ नहीं करता है जो एक रिफ्लो का कारण बन सकता है (https://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part- 4 /) और इस मुद्दे को हल करता है। धन्यवाद!! – Jun

8

थोड़ी देर के लिए संघर्ष करने के बाद, मैं वेबकिट पर इनपुट स्वीकार करने के लिए एक संतोषजनक तत्व को मजबूर करने का एक तरीका ढूंढने के लिए था।

समाधान एक अस्थायी संपादन योग्य तत्व बनाने के लिए है, इसे डीओएम में जोड़ें, इसे फोकस करें और फिर इसे हटा दें। इससे पृष्ठ पर किसी भी अन्य संतोषजनक तत्व को निष्क्रिय करने का कारण बन जाएगा।

इस के लिए बराबर jQuery कोड होगा:

$('<div contenteditable="true"></div>').appendTo('body').focus().remove() 

मैं मूल उदाहरण नवीनीकृत किया है इस तकनीक का एक डेमो शामिल करने के लिए: http://jsfiddle.net/yfcsU/4/

संबंधित मुद्दे