Javascript-HTML5-Capture-keyCode und schreiben auf Leinwand

Ich Schreibe eine Anwendung die ich brauche, um zu simulieren eine textarea. Der einzige Weg, ich weiß, wie zu nähern, es zu erfassen, den Schlüsselcode an einem Schlüssel-Ereignis. Wie würde man gehen, über die Einnahme, dass keyCode und unterstützt utf-8, gelten, die auf die Leinwand?

Cheers

InformationsquelleAutor Russell | 2010-09-16
  1. 10

    Dies scheint wie eine schlechte Idee, da gibt es eine Menge, die über text-input, textarea kostenlos (Cursor, selection, cut, paste, drag und drop, Taste, Handhabung, usw.), aber hier sind zwei Dinge, die Sie tun müssen :

    1. Geben Sie Ihre <canvas> eine tabindex - Attribut, so dass es den Fokus erhält, und daher heben wichtige Ereignisse;
    2. Hinzufügen keypress (nicht keydown) handler der <canvas> - element zum erfassen von Texteingaben.

    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>
    • Ich denke, Sie mag Recht haben, es scheint wie eine Menge Arbeit zu replizieren, eine textarea-Komponente und die ich eigentlich nicht sehen, alle Vorteile halten Sie eine textarea aus (es ist nicht wirklich eine Anwendung, sondern um ein edutainment-Spiel, wo alles passiert in einem canvas-element, sondern müssen erhalten text-input). Ich glaubst setzen eine transparente textarea über meine Leinwand ist die beste Lösung.
    • Während der Tastendruck erfasst Zeichencodes, es erfasst nicht backspaces. Warum Tastendruck statt keydown?
    • Ich würde verwenden keydown für backspace und delete unterstützt. Für das sammeln von text-Eingabe, obwohl keypress ist die einzige wichtige Veranstaltung, die Ihnen Daten über die Zeichen eingegeben haben, so ist die einzige Wahl. Siehe unixpapa.com/js/key.html
    • fantastische Ressource! Nur um zusammenzufassen, was ich verstehe aus der Forschung in diesem Artikel und anderswo, der Unterschied ist scan-code (keydown) v. Charakter code (keypress). Keydown wird erkennen, welche Tasten gedrückt werden müssen, aber nicht informieren Sie über Tastenkombinationen (z.B. shift/caps-lock). Das funktionierte gut, für meinen Fall, da Fall war kein Problem, aber mit keydown nicht definieren einen Zustand, der groß-und Kleinschreibung. Auch, wie der Artikel zeigt, keydown nicht kulturell gebunden, und begrenzen die Lokalisierung/Sprache Probleme. Sehr zu empfehlen, Artikel ist jedoch sehr aufschlussreich.
    • Ja, das deckt sich mit meinem Verständnis.
    InformationsquelleAutor Tim Down
  2. 3

    Verwendung von jquery:

    <div id="myTextArea></div>

$('#myTextArea').keypress(function (event) {

    $('#myTextArea').append(String.fromCharCode(event.which));

});
    InformationsquelleAutor Rohrbs
  3. 1

    Haben Sie gesehen,Bespin? Es ist mehr als nur ein textarea-Ersatz, aber im Grunde tut, was Sie wollen. Man könnte sicherlich Blick in den code und die Dokumentation, oder wenn es zu Ihren Anforderungen passt, nutzen Sie einfach es.

    • Wie Sie wissen, was Sie wollen? Sind Sie ein Gedankenleser?
    • Ich werde es anders formulieren - es erfüllt die spezifischen Anforderungen, die Sie fragte: "Javascript-HTML5-Capture-keyCode und schreiben zu Canvas" Als ein rein Leinwand-basierte text-editor, die Sie erfassen Schlüssel eingegeben und zeigt es mit canvas - unter anderem.
    InformationsquelleAutor Russell Leggett
Schreibe einen Kommentar