Ich schreibe eine Anwendung, in der ich eine Textarea simulieren muss. Der einzige Weg, wie ich es angehen kann, ist, den keyCode bei einem Schlüsselereignis zu erfassen. Wie würde man diesen keyCode nehmen und, wenn er utf-8 unterstützt, diesen auf die Leinwand anwenden?Javascript HTML5 Capture keyCode und schreibe in Canvas
Prost
Das scheint eine schlechte Idee zu sein, denn es gibt sehr viel über und über Texteingabe, die ein Textfeld Ihnen kostenlos gibt (Caret, Auswahl, Ausschneiden, Einfügen, Ziehen und Ablegen, Pfeiltastenbedienung), aber hier zwei Dinge, die Sie tun müssen:
<canvas> ein tabindex Attribut, so dass es den Fokus erhalten kann und damit wichtige Ereignisse erhöhen;keypress (nicht keydown) Handler zum <canvas> Element hinzu, um Texteingabe zu erfassen.Code:
<canvas id="textarea" tabindex="1" width="300" height="200"></canvas>
<script type="text/javascript">
var el = document.getElementById("textarea");
el.onkeypress = function(evt) {
var charCode = evt.which;
var charStr = String.fromCharCode(charCode);
alert(charStr);
};
</script>
Haben Sie Bespin gesehen? Es ist mehr als nur ein Textarea Ersatz, aber es macht im Grunde, was Sie wollen. Sie können sich sicherlich den Code und die Dokumentation ansehen, oder wenn es Ihren Anforderungen entspricht, verwenden Sie es einfach.
Wie wissen Sie, was sie wollen? Bist du ein Gedankenleser? – strager
Ich umformuliere - es erfüllt die spezifische Anforderung, die sie sich erkundigten: "JavaScript HTML5 Capture keyCode und schreibe in Canvas" Als reiner Canvas-basierter Texteditor erfassen sie unter anderem eingegebene Keys und zeigen sie mit Canvas an. –
mit JQuery:
<div id="myTextArea></div>
$('#myTextArea').keypress(function (event) {
$('#myTextArea').append(String.fromCharCode(event.which));
});
Ich denke du magst Recht haben, es scheint eine Menge Arbeit zu sein um eine Textarea zu replizieren und ich sehe keine Vorteile darin eine Textarea zu behalten (es ist nicht wirklich eine Anwendung, sondern eher ein Edutainment Spiel wo alles ist geschieht in einem Canvas-Element, muss aber Texteingabe erhalten). Ich denke, * eine transparente Textfläche über meine Leinwand zu legen, ist die bestmögliche Lösung. –
Während der Tastendruck Zeichenkodierungen erfasst, werden keine Rücksprünge erfasst. Warum Keypress anstelle von Keydown? –
@DavidR .: Ich würde 'Keydown' für die Rücktaste verwenden und die Unterstützung löschen. Für das Sammeln von Texteingabe ist 'keypress' jedoch das einzige Schlüsselereignis, das Ihnen Daten über die eingegebenen Zeichen gibt, so dass dies die einzige Wahl ist. Siehe http://unixpapa.com/js/key.html –