सामग्री-संपादन योग्य div

में कर्सर पंक्ति और कॉलम प्राप्त करें कर्सर स्थिति खोजने के लिए कई व्यंजन हैं क्योंकि उपयोगकर्ता सामग्री-संपादन योग्य div में टेक्स्ट टाइप करता है, लेकिन मैं उनमें से कोई भी काम करने के लिए नहीं प्राप्त कर सकता। वास्तव में, मुझे सबसे सरल कोड से सबसे आश्चर्यजनक परिणाम मिलते हैं; यदि, इस निम्न स्निपेट में, आप इसे हटाने के लिए कुछ टेक्स्ट जोड़ते हैं और फिर बैकस्पेस जोड़ते हैं, तो आपका स्टार्टऑफसेट वास्तव में बढ़ता है! (मैं कल्पना कर सकता हूं कि इसके विभाजन तत्व या कुछ और ऑफ़सेट में गैर-प्रिंट करने योग्य टैग या कुछ शामिल हैं।)सामग्री-संपादन योग्य div

मेरे पास एक div है जिसमें एक निश्चित फ़ॉन्ट होगा, लेकिन मैं सिंटैक्स को हाइलाइट करने की योजना बना रहा हूं (यह कुछ कोडमिरर नहीं कर सकता यदि बनाता है उस तरह समझ कारण है कि मैं अपने आप को स्थिति प्राप्त करना चाहते हूँ संपादन के साथ अपनी और अधिक इंटरैक्टिव शीघ्र लिपि में कहीं भी)

<html> 
<head> 
<script type="text/javascript"> 
<!-- 
var ta = null; 

function onKeypress(event) { 
    var range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeypress = onKeypress; 
} 
//--> 
</script> 
<body onload="init();"> 
<noscript> 
Sorry, you need javascript. Not much to see here otherwise; move along. 
</noscript> 
<p id="msg"></p><hr/> 
<div id="ta" contenteditable="true" style="width:100%; height:100%; font-family: courier;"> 
</div> 
</body> 
</html>

मैं पंक्ति और स्तंभ कैसे पता, और पाठ प्राप्त कर सकते हैं, बस करो। किसी भी पंक्ति के लिए, ऐसी सामग्री-संपादन योग्य div में?

स्रोत

2012-03-31 Will

मुझे यकीन है कि तुम क्या कह रहे हैं अपने कोड के साथ गलत है नहीं कर रहा हूँ। जब मैं क्रोम में आपके उदाहरण कोड का परीक्षण करता हूं, तो कोड काम करता प्रतीत होता है - जब मैं स्थिति डिस्प्ले को बैकस्पेस करता हूं तब तक अद्यतन नहीं होता है जब तक कि मैं div में अधिक टेक्स्ट टाइप करना प्रारंभ नहीं करता, लेकिन फिर स्थिति प्रदर्शन फिर से सही होता है। क्या समस्या है कि बैकस्पेस कुंजीपटल घटना को ट्रिगर नहीं कर रहा है, या कुछ और जो मुझे याद आ रहा है? – Griffin

आह, मुझे लगता है कि मैं समझता हूं, मैंने एक उत्तर पोस्ट किया है। – Griffin

-1

क्या आपने divs के बजाय टेक्स्टबॉक्स का उपयोग करने पर विचार किया है?

<textbox>edit my content</textbox>

आप एक div उपयोग करना आवश्यक है आप innerHTML संपत्ति

alert(document.getElementById('theIdOfMyDiv').innerHTML);

या जोड़ने के लिए सामग्री

var currentContent = document.getElementById('theIdOfMyDiv').innerHTML; 
currentContent = currentContent + 'add some content';

स्रोत

2012-04-01 10:42:53 codelove

क्या आपने सवाल भी पढ़ा था? प्रश्न – Griffin

+1 यदि आप एंटर कुंजी दबाते हैं तो क्या होता है? – codelove

साथ उसकी सामग्री को मिलता है और एक onkeydown को onkeypress बदलते पर अद्यतन कर सकते हैं (ताकि बैकस्पेस कैप्चर किया जा सके) मैं देखता हूं कि स्थिति बैकस्पेस दर्ज होने पर एक बार वृद्धि को प्रदर्शित करती है।

मुझे माफ कर दो अगर मैं छड़ी के गलत छोर मिल गया है, लेकिन मेरा मानना है कि एक ही समाधान निम्नलिखित कार्य कर रही:

var ta = null; 
var range = null; 

function onKeyDown(event) { 
    if(event.which != 8 && event.which != 46) { 
     range = window.getSelection().getRangeAt(0); 
     document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
    } 
} 

function onKeyUp(event) { 
    range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeydown = onKeyDown; 
    ta.onkeyup = onKeyUp; 
}

स्रोत

2012-04-01 15:29:26 Griffin

को समझने के लिए – Will

यह शून्य से फिर से गिनती शुरू करता है। कर्सर चालू होने वाली पंक्ति को प्रदर्शित करने के लिए आपके कोड में कुछ भी नहीं है। – Griffin

लेकिन यह बड़ा सवाल है! "मैं पंक्ति और कॉलम को कैसे जान सकता हूं, और किसी भी पंक्ति के लिए पाठ प्राप्त कर सकता हूं, ऐसी सामग्री-संपादन योग्य div में?"। चूंकि यह एक समृद्ध टेक्स्ट एडिटर की तरह है, हर बार उपयोगकर्ता एक कुंजी दबाता है, मैं जानना चाहता हूं कि वे किस लाइन पर हैं और लाइन सामग्री क्या है। – Will

सामग्री-संपादन योग्य div

उत्तर

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