में लाइन ब्रेक खो देता है यह jQuery मंचों पर समस्या के बारे में काफी बात करता है लेकिन मैं अपनी स्थिति के लिए समाधान नहीं समझ सकता।jQuery टेक्स्ट() फ़ंक्शन आईई
मेरे पास कुछ पाठ तत्वों के साथ एक अनियमित सूची है ... उपयोगकर्ता jQuery के माध्यम से नई सूची आइटम बना सकता है, जो SQL डेटाबेस में सहेजे जाते हैं। वे मौजूदा सूची आइटम भी संपादित कर सकते हैं। साथ ही, क्योंकि प्रत्येक सूची आइटम में टेक्स्ट काफी लंबा हो सकता है, उनके पास प्रत्येक सूची आइटम को 'छिपाने' का विकल्प होता है, इसलिए यह स्ट्रिंग का एक छोटा संस्करण दिखाता है। यह है कि सूची आइटम है कि एक निश्चित लंबाई से अधिक कर रहे ट्रंकेटस एक कस्टम jQuery प्लगइन द्वारा नियंत्रित किया जाता है ... यहाँ क्या प्रत्येक सूची आइटम लगता है कि एक बार truncate प्लगइन यह फ़ॉर्मेट कर दिया है है:
<li id="item_1">
<div class="note">
This is the text that shows when this element is truncated <span style="display: none;" class="truncate_ellipsis">...</span>
<span style="display: inline;" class="truncate_more">This is the text that will be hidden if the user clicks on the 'hide' button</span>
</div>
<div class="toggle_wrapper">
<div class="note_toggle">
<a href="#" class="truncate_more_link">Hide note</a>
</div>
<div style="display: block;" class="note_controls">
<span class="edit_note"><a href="#note_textfield" id="edit_note_1">Edit</a></span> | <span class="delete_note"><a href="#" id="delete_note_1">Delete</a></span>
</div>
</div>
</li>
समस्या मेरे पास है वह यह है कि उपयोगकर्ता 'संपादन' पर क्लिक करता है और यह कक्षा 'नोट' के साथ div की सामग्री लेता है और इसे एक टेक्स्ट क्षेत्र में निर्दिष्ट करता है। उपयोगकर्ता तब टेक्स्ट संपादित कर सकता है, और इसे सहेज सकता है। मैं निम्न स्क्रिप्ट का उपयोग कर रहा div की सामग्री को हड़पने और पाठ क्षेत्र निर्दिष्ट करने के लिए:
$('.edit_note a').click(function(event){
// Get the parent li of the 'edit' link that was clicked
var parentLi = $(this).closest('li');
// fade out the li that's being edited
parentLi.fadeOut('fast');
// remove the '...' that shows when the note is truncated
parentLi.find('.truncate_ellipsis').remove();
// find the 'note' div within the li that's being edited
var currentNote = parentLi.find('.note');
// grab the id of this note... used when saving to the DB
var noteId = $(this).attr('id').substr(10);
// Set the current note id variable and editing status
currentNoteId = noteId;
currentNoteStatus = 'edit';
//add the note ID as a hidden field to the text editor form
$('input[name$="note_id"]').val(noteId);
// grab the text from this note and add it to the text area
// (textarea id is 'notes_content')
$('#notes_content').val($.trim(currentNote.text()); // this is the text area
// fade in the text area so the user can edit
$('div.notes_textarea').fadeIn();
});
एक बार जब यह असाइन करने से पहले, मैं एक समारोह मैं ऑनलाइन पाया कन्वर्ट करने के लिए लाइन बैंक रसीदों को टूट जाता है का उपयोग कर रहा सहेज लिया जाता है वापस उचित सूची आइटम के भीतर 'ध्यान दें' div के पाठ क्षेत्र की सामग्री को:
function nl2br (str, is_xhtml) {
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}
यह सब फ़ायरफ़ॉक्स/क्रोम/ओपेरा/सफारी में ठीक काम करता है ... लेकिन, आईई लाइन से छुटकारा मिलता है टूट जाता है जब यह jQuery पाठ() फ़ंक्शन के माध्यम से पाठ को पकड़ता है। यह jQuery प्रलेखन पर इस पेज की टिप्पणियों में चर्चा की है:
कुछ लोगों को स्रोत तत्व क्लोनिंग द्वारा सफलता मिली है, 'पूर्व' टैग में यह लपेटकर, तो उस की सामग्री लेने और डाल यह पाठ क्षेत्र में है। यह लाइन ब्रेक के लिए काम करता है लेकिन अतिरिक्त रिक्त स्थान, टैब इत्यादि भी लाता है और यह थोड़ा गड़बड़ दिखता है। पाठ को पकड़ने के लिए एचटीएमएल() jQuery फ़ंक्शन का उपयोग करने के लिए एक बेहतर समाधान प्रतीत होता है, फिर लाइन ब्रेक के लिए ब्रश को प्रतिस्थापित करें, और किसी भी अन्य HTML स्वरूपण को बाहर निकालें।
हालांकि मैं जावास्क्रिप्ट के लिए नया हूं, और मैं नियमित अभिव्यक्तियों पर बकवास कर रहा हूं इसलिए मुझे कोई संकेत नहीं होगा कि यह कैसे करें और मैं समय से बाहर हो रहा हूं! मैं स्ट्रिंग स्वरूपण के साथ एक नियमित अभिव्यक्ति है, या बस कुछ मदद की ज़रूरत है निम्न कार्य करें:
निकालें अवधि की सामग्री को हटाने के बिना एक स्ट्रिंग से सभी अवधि टैग (मेरी truncate समारोह वर्ग "के साथ एक अवधि कहते हैं truncate_more "... ऊपर एचटीएमएल कोड)
निकालें br देखते हैं और उन्हें न्यू लाइन अक्षर हैं जो एक पाठ क्षेत्र तत्व में सही ढंग से प्रदर्शित और ब्राउज़रों
या .. किसी के जानता है भर में लगातार हो जाएगा के साथ बदलें एक बेहतर कामकाज इस आईई/टेक्स्टरेरा/लाइनब्रेक मुद्दे के लिए, मैं वास्तव में एक बेवकूफ गाइड की सराहना करता हूं :)
शायद एक साधारण समाधान के लिए थोड़ी सी जानकारी है लेकिन मैंने सोचा कि मैं स्थिति को समझाने की कोशिश करूंगा जितना मैं कर सकता हूं ! किसी भी मदद बेहद सराहना की जाएगी ....
संपादित: 'नीचे br के लिए काम किया TheJuice का जवाब/आईई लाइन मुद्दा टूट जाता है (धन्यवाद!), लेकिन मैं से छुटकारा पाने के लिए एक समान regex बाहर ले जाने की जरूरत है स्पैन, क्योंकि वे केवल कुछ पाठ को समाहित करते हैं।मैं निम्नलिखित है, जो फ़ायरफ़ॉक्स में लेकिन IE में ठीक से काम करने लगता है की कोशिश की फैला रहते हैं:
var withBRs = currentNote.html();
var textWithBreaks = withBRs.replace(/\<br\>/gi,'\r');
textWithBreaks = textWithBreaks.replace(/\<.*span.*\>/g, '');
किसी अन्य संपादन का: 'TheJuice' हल इस समस्या को भी ... मेरे भीषण regex ध्यान न दें और बस करो कि वह क्या कहता है कि क्या आप खुद को एक ही स्थिति में पाते हैं! उन सभी को धन्यवाद जिन्होंने सुझाव दिए ...
सुपर यह Node.js के लिए jQuery 'cheerio' के साथ काम करता है - https://github.com/cheeriojs/cheerio/issues/839 देखें – loretoparisi