क्या किसी को सामग्री में किसी लिंक को संपादित करने के बारे में कोई सुझाव है। संपादन योग्य div? यह लिंक आदर्श होगा जब लिंक या तो माउस के साथ क्लिक किया जाता है, या कर्सर लिंक हिट करता है, कि एक छोटा सा संकेत पॉप अप होगा और उपयोगकर्ता को लिंक की href प्रॉपर्टी को बदलने की अनुमति देगा। प्रॉम्प्ट मुद्दा नहीं है, लेकिन लिंक का पता लगाना संभव है या तो क्लिक किया गया है या कर्सर लिंक पर पहुंचा है? ऑनफोकस किसी सामग्री में काम नहीं कर रहा है फ़ायरफ़ॉक्स पर उचित div & सफारी। कोई विचार?किसी सामग्री के भीतर एक लिंक को संपादित करने के लिए कैसे करें योग्य div
9
A
उत्तर
15
मुझे यकीन है कि यह वही है जो आप खोज रहे थे, हालांकि मैंने कल्पना को थोड़ा सा मजाक बनाने के लिए jQuery का उपयोग किया था। jsbin पूर्वावलोकन उपलब्ध है, तो इसे देखो पर जाएं। अगर कोई जवाब के लिए इसे शुद्ध जेएस में परिवर्तित करने में सक्षम है, तो मैंने इसे एक समुदाय विकी बना दिया है।
यह KeyUp से जुड़ कर काम करता है/संपादन योग्य div पर घटनाओं क्लिक करें, फिर नोड है कि उपयोगकर्ताओं को कैरट उन आईई लोगों के लिए मानकों के लिए window.getSelection()
, या document.selection
का उपयोग करने में रखा जा रहा है के लिए जाँच। बाकी कोड संपादन को पॉपिंग/हैंडलिंग संभालता है।
jQuery तरीके:
function getSelectionStartNode(){
var node,selection;
if (window.getSelection) { // FF3.6, Safari4, Chrome5 (DOM Standards)
selection = getSelection();
node = selection.anchorNode;
}
if (!node && document.selection) { // IE
selection = document.selection
var range = selection.getRangeAt ? selection.getRangeAt(0) : selection.createRange();
node = range.commonAncestorContainer ? range.commonAncestorContainer :
range.parentElement ? range.parentElement() : range.item(0);
}
if (node) {
return (node.nodeName == "#text" ? node.parentNode : node);
}
}
$(function() {
$("#editLink").hide();
$("#myEditable").bind('keyup click', function(e) {
var $node = $(getSelectionStartNode());
if ($node.is('a')) {
$("#editLink").css({
top: $node.offset().top - $('#editLink').height() - 5,
left: $node.offset().left
}).show().data('node', $node);
$("#linktext").val($node.text());
$("#linkhref").val($node.attr('href'));
$("#linkpreview").attr('href', $node.attr('href'));
} else {
$("#editLink").hide();
}
});
$("#linktext").bind('keyup change', function() {
var $node = $("#editLink").data('node');
$node.text($(this).val());
});
$("#linkhref").bind('keyup change', function() {
var $node = $("#editLink").data('node');
$node.attr('href', $(this).val());
$node.and('#linkpreview').attr('href',$(this).val());
});
});
संबंधित मुद्दे
- 1. सामग्री संपादन योग्य div को दिए गए एक सामग्री योग्य
- 2. एक div के अतिप्रवाह पाठ को किसी अन्य div में स्थानांतरित करने के लिए कैसे करें
- 3. सामग्री के लिए सामग्री को विभाजित करने योग्य सामग्री div या p
- 4. सामग्री-संपादन योग्य div
- 5. सुनिश्चित करें कि किसी भी सामग्री को एक निश्चित div
- 6. किसी div की सामग्री को अन्य div
- 7. सामग्री योग्य div में तत्वों को कैसे अक्षम करें?
- 8. मैं एक div कि इस तरह दिखता है के भीतर एक सरल गैर क्लिक करने योग्य लिंक है जावास्क्रिप्ट
- 9. आईफ्रेम के भीतर एक div का चयन कैसे करें?
- 10. अनुपलब्ध सामग्री के चारों ओर लिंक संपादित करें
- 11. स्क्रोल करने योग्य div
- 12. div पर एक ऑनक्लिक कॉलबैक कैसे संलग्न करें लेकिन div के अंदर किसी लिंक पर नहीं?
- 13. किसी अन्य div के भीतर div को मानचित्र कैसे सेट करें?
- 14. कंटेनर के अंदर स्क्रोल करने योग्य div
- 15. किसी सामग्री से टेक्स्ट निकालना संपादन योग्य div
- 16. सीएसएस - एक div "क्लिक करने योग्य"
- 17. एक आकार के भीतर आकार को ऑफसेट करने योग्य
- 18. Levenshteins को संशोधित करने के लिए कैसे संपादित करें "आसन्न पत्र एक्सचेंज" को 1 संपादित करें
- 19. पाठ की एक स्ट्रिंग के भीतर किसी भी यूआरएल के बदलने के, php के साथ क्लिक करने योग्य लिंक करने के लिए
- 20. एक डीआईवी अनुभाग कैसे क्लिक करने योग्य बनाने के लिए?
- 21. स्क्रोल करने योग्य div
- 22. आप एक div के क्षेत्र को क्लिक करने योग्य कैसे बनाते हैं? पूरे div नहीं!
- 23. वेबव्यू की सामग्री को प्रोग्रामेटिक रूप से सेट/संपादित करने के लिए कैसे करें
- 24. सीएसएस में div की सामग्री को छिपाने के लिए कैसे
- 25. एंड्रॉइड - ListView को क्लिक करने योग्य लिंक
- 26. extjs textarea को संपादित करने योग्य बनाएं
- 27. मैं div के भीतर गतिशील सामग्री के साथ एक अनियंत्रित सूची कैसे केंद्रित कर सकता हूं?
- 28. किसी अन्य पृष्ठ पर एक div की सामग्री लोड करें
- 29. आप एक div फिट करने के लिए सामग्री कैसे कम करते हैं?
- 30. जावास्क्रिप्ट के साथ किसी अन्य div के शीर्ष पर div को कैसे स्थानांतरित करें?
बहुत शांत, बहुत बहुत शुक्रिया !!! –