क्या टेक्स्ट क्षेत्र आंशिक रूप से संपादन योग्य बनाने का कोई तरीका है? (टेक्स्ट संपादन योग्य टेक्स्ट का केवल भाग बनाएं)

Question

मैं बस एक ऐसी स्थिति में आया जहां यह एक टेक्स्ट एरिया (पहले टेक्स्ट के साथ लोड किया गया) का केवल एक हिस्सा है, जबकि संपादन योग्य हो सकता है जबकि अन्य भाग नहीं हैं ("बाहर ग्रे ", इतनी बात करने के लिए)।

क्या यह सामान्य रूप से जावास्क्रिप्ट का उपयोग करके संभव है?

मैं jQuery का उपयोग करूँगा।

Answer 1

आप इस (सिर्फ एक उल्लिखित विचार, कोई कोड) कर सकता है। अपरिवर्तनीय भागों के लिए निश्चित तारों का उपयोग करें, और संशोधित भागों के लिए [\s\S]*? का उपयोग करें। अपने regex एंकर करने के लिए ^ और $ का उपयोग करें।

/^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/ 

अब keyup घटना पर प्रतिक्रिया है, और शायद अन्य घटनाओं के साथ-साथ (जैसे paste)।

प्रत्येक प्रासंगिक घटना के साथ, रेगेक्स अभी भी मेल खाता है तो जांच करें।

यदि ऐसा नहीं होता है, तो ईवेंट रद्द करें।

प्रभावी रूप से, इसे रेगेक्स में शाब्दिक भागों में संशोधनों को रोकना चाहिए और इस प्रकार आपके पाठ के कुछ हिस्सों को केवल पढ़ने के लिए ही बनाना चाहिए।

फॉर्म पोस्ट के बाद सर्वर पक्ष पर स्ट्रिंग का परीक्षण करना न भूलें - कभी भरोसा न करें कि ग्राहक अमान्य मान नहीं भेज सकता है।

---

संपादित

आप एक regex बोली समारोह का उपयोग कर सकते गतिशील तार से कि regex निर्माण करने के लिए, यह आप परेशानी का एक बहुत बचाने के लिए करना चाहिए।

function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") } 

उपयोग

var re = new Regex(
    "^" + 
    [regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?") 
    + "$" 
); 

Answer 2

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

आपके पास विकल्प हैं, हालांकि। यदि आप उस पाठ को पहचान सकते हैं जिसे अक्षम करने की आवश्यकता है, तो आप इसे एक DOM तत्व (यानी एक div) के रूप में जोड़ सकते हैं, और उसके बाद इसे इस तरह से स्थितिबद्ध कर सकते हैं जिसका अर्थ है कि यह टेक्स्ट क्षेत्र के अंदर है।

आप यह इंगित कर सकते हैं कि यह div टेक्स्ट क्षेत्र के अंदर या तो टेक्स्ट क्षेत्र को बड़ा करके और स्थिति का उपयोग करके: टेक्स्ट क्षेत्र पर div को स्थानांतरित करने के लिए सापेक्ष/पूर्ण शैलियों का उपयोग कर रहा है। या, आप टेक्स्ट क्षेत्र पर सीमा को हटा सकते हैं और इसे एक कंटेनर पर रख सकते हैं जिसमें div w/"disabled" टेक्स्ट भी शामिल है।

Answer 3

यदि आप एक सादे टेक्स्टरेरा तत्व का उपयोग कर रहे हैं, तो आप आवश्यक सामग्री को स्टाइल करने में सक्षम नहीं होंगे (इस सामग्री के संपादन के आधार पर या नहीं)। सबसे अच्छा आप यह देखने में सक्षम होंगे कि क्या आपका उपयोगकर्ता बदलने की कोशिश कर रहा है या तो ब्लैकलिस्ट या श्वेतसूची पर है या फिर संपादन को रोकें या तदनुसार नहीं। आप कुछ दृश्य प्रतिक्रिया भी प्रदान कर सकते हैं जैसे चेतावनी संदेश "आप ऐसा नहीं कर सकते"।

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

आप अपने आवश्यक टेक्स्टरेरा की तरह दिखने के लिए एक div तत्व को स्टाइल करने में सक्षम होंगे, फिर उसमें संपादन योग्य स्पैन का उपयोग करें ताकि यह निर्धारित किया जा सके कि टेक्स्ट का एक विशेष ब्लॉक संपादित किया जा सकता है या नहीं। इसके बाद आप जावास्क्रिप्ट कमांड का उपयोग कर सकते हैं (उपरोक्त लिंक देखें) या इस सामग्री को पुनः प्राप्त करने के लिए "सेव" बटन का उपयोग करें, इसे अपने वास्तविक टेक्स्टरेरा (जिसे आप छुपा सकते हैं) के मान के रूप में सेट करें और अपने पृष्ठ को सामान्य के रूप में वापस पोस्ट करें।

निम्न कोड का उपयोग किसी न किसी उदाहरण के रूप में करें।

<div id="editable-content"> 
    <span id="block1" class="editable" contenteditable="true">This is some editable content which will </span> 
    <span id="block2" class="non-editable">quickly be followed by some non-editable content</span> 
</div> 
<div style="display: none;"> 
    <textarea id="PostedContent"></textarea> 
</div> 
<div> 
    <input id="save-page" type="submit" value="Save Page" /> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('#save-page').click(function() { 
      $('#PostedContent').val($('#editable-content').text()); 
     }); 
    }); 
</script> 

Answer 4

मेरा सुझाव चाहते हैं, बल्कि संपादन योग्य/गैर संपादन योग्य सामग्री के उप-स्ट्रिंग में एक input की सामग्री को तोड़ने की कोशिश कर के बजाय, आप किसी HTML तत्व में contentEditable विशेषता का उपयोग, और कहा कि पारित करने के लिए JavaScript का उपयोग पृष्ठ में कहीं और छुपा input संपादित मूल्य।

एक regex कि अपने पूरे पाठ से मेल खाता है वसीयत:

Answer 5

ठीक है, आप कुछ इस तरह कर सकता है। यह कोड बहुत अक्षम है, मैं बस अवधारणा की रूपरेखा तैयार करने की कोशिश कर रहा हूं।

जे एस:

$(function() { 
      var tb = $("#t").get(0); 
      $("#t").keydown(function (event) { 
       var start = tb.selectionStart; 
       var end = tb.selectionEnd; 
       var reg = new RegExp("(@{.+?})", "g"); 
       var amatch = null; 
       while ((amatch = reg.exec(tb.value)) != null) { 
        var thisMatchStart = amatch.index; 
        var thisMatchEnd = amatch.index + amatch[0].length; 
        if (start <= thisMatchStart && end > thisMatchStart) { 
         event.preventDefault(); 
         return false; 
        } 
        else if (start > thisMatchStart && start < thisMatchEnd) { 
         event.preventDefault(); 
         return false; 
        } 
       } 
      }); 
     }); 

एचटीएमएल

<textarea id="t" rows=5 cols="80">Hello this is a test @{stuff} 

     this part is editable @{other stuff}  

    </textarea> 

इस के अपने विचार का उपयोग करता है "मार्कर।" सामान्य विचार कहना ठीक है, क्या टेक्स्ट रेंज है जिसे उपयोगकर्ता हमारे मार्करों में से किसी एक के अंदर संपादित करने का प्रयास कर रहा है? जाहिर है, प्रत्येक बार दबाए जाने पर एक regexp का उपयोग करना इसे निर्धारित करने का सबसे अच्छा तरीका नहीं है, मैं तीर कुंजियों इत्यादि को अनदेखा नहीं कर रहा हूं, लेकिन यह आपको एक सामान्य विचार देता है।

Answer 6

एक माता पिता के तत्व में, आप ठोस ग्रे 1px के लिए सीमा निर्धारित कर सकते हैं और फिर इस के अंदर,

1) पाठ क्षेत्र (सीएसएस संशोधित सीमा नहीं करने के लिए) 2) लेबल (कोई सीमा के साथ-साथ डाल)

इस मामले में, यह 1 के अंदर दोनों ग्रंथों की तरह दिखेगा) और 2) एक बॉक्स में रखे जाने के बाद एक साथ हैं। 1) हालांकि संपादन योग्य है जबकि दूसरा ग्रे हो गया है।

Answer 7

मैं दो textareas एक केवल पढ़ने के लिए और एक अन्य संपादन योग्य एक सुझाव है, ओवरलैपिंग तो ऐसा लगता है कि इसके लिए केवल एक ही