Cursorzeile und -spalte in einem editierbaren div-Inhalt abrufen

Es gibt mehrere Rezepte zum Suchen der Cursorposition, da der Benutzer Text in ein inhaltsbearbeitbares div eingibt, aber ich kann keine von ihnen zum Arbeiten bekommen. In der Tat bekomme ich die überraschendsten Ergebnisse aus dem einfachsten Code; Wenn Sie in diesem folgenden Snippet etwas Text hinzufügen und dann die Rücktaste drücken, um es zu entfernen, wird Ihr Startoffset tatsächlich erhöht! (Ich kann seine Aufspaltung Elemente oder etwas vorstellen und der Offset enthält nicht druckbare Tags oder etwas.)Cursorzeile und -spalte in einem editierbaren div-Inhalt abrufen

Ich habe eine div, die eine feste Schriftart haben, aber ich habe vor, Syntax-Highlighting hinzufügen (es ist nicht etwas codemirror kann nur tun, seine mehr interaktive Eingabeaufforderung mit dem Bearbeiten von überall im Skript, wenn diese Art von macht Sinn, warum ich die Position selbst bekommen bin wollen)

<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>

Wie kann ich wissen, die Zeile und Spalte, und erhalten Sie den Text. für irgendeine Reihe, in solch einem Inhalt editierbaren div?

Quelle

2012-03-31 Will

Ich bin nicht sicher, was Sie sagen, ist falsch. Wenn ich Ihren Beispielcode in Chrome teste, scheint der Code zu funktionieren - wenn ich rückwärts gehe, wird die Positionsanzeige nicht aktualisiert, bis ich mehr Text in das div eintippe, aber dann ist die Positionsanzeige wieder korrekt. Ist das Problem, dass die Rücktaste nicht das Keyup-Ereignis auslöst oder etwas, das mir fehlt? – Griffin

Ah, ich glaube ich verstehe, ich habe eine Antwort geschrieben. – Griffin

-1

Haben Sie überlegt, Textfelder anstelle von divs zu verwenden?

<textbox>edit my content</textbox>

Wenn Sie müssen ein div verwenden Sie können seinen Inhalt mit der Innerhtml Eigenschaft

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

oder hinzufügen Inhalt

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

Quelle

2012-04-01 10:42:53 codelove

Hast du die Frage überhaupt gelesen? – Griffin

+1 für das Verständnis der Frage – codelove

Nach Änderung der onkeypress zu einem onkeydown erhalten und aktualisieren (so dass Rücktaste erfasst wird) Ich sehe, dass die Positionsanzeige einmal erhöht wird, wenn eine Rücktaste eingegeben wird.

mir verzeihen, wenn ich das falsche Ende des Stockes haben, aber ich glaube, eine Lösung ist folgendes tun:

mit Ihrem Code

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; 
}

Quelle

2012-04-01 15:29:26 Griffin

Was passiert, wenn Sie die Eingabetaste drücken? – Will

Es beginnt wieder von Null zu zählen. In Ihrem Code ist nicht angegeben, in welcher Zeile sich der Cursor befindet. – Griffin

aber das ist die größere Frage! "Wie kann ich die Zeile und Spalte kennen, und den Text für jede Zeile, in einem solchen Inhalt editierbare div?". Da dies wie ein Rich-Text-Editor ist, möchte ich jedes Mal, wenn der Benutzer eine Taste drückt, wissen, in welcher Zeile er sich befindet und was der Zeileninhalt ist. – Will

Cursorzeile und -spalte in einem editierbaren div-Inhalt abrufen

Antwort

Verwandte Themen