Skip to main content
C
Chemistry guy
Inspiring
April 8, 2019
Answered

Capture Enter key with javascript for HTML5 Canvas Animate Application

  • April 8, 2019
  • 2 replies
  • 1982 views

I'm converting my old Flash applications to HTML5 Canvas applications. In one of them, I want to capture the Enter key when something is typed in a TextInput component and the Enter key is pressed, and if it is pressed, do something. How do I do that with javascript? Here's my Actionscript code. Many thanks

stage.focus = txt_defNumber;

txt_correct.text = gCorrect

txt_incorrect.text = gIncorrect

txt_given.text = gGiven

txt_defNumber.addEventListener(KeyboardEvent.KEY_DOWN, reportKeyDown)

var Term = ""

var Definition = ""

var gNumber = ""

var TermPlural = ""

function reportKeyDown(event:KeyboardEvent):void {   

if (event.keyCode == Keyboard.ENTER)  {         

   

gNumber = txt_defNumber.text;

var trim:RegExp = /^\s+|\s+$/g;

gNumber = gNumber.replace(trim, "");

if (gNumber == "1") {

     Term = "chemistry"

     Definition = "The study of the structure and behavior of matter."

     gotoAndPlay("input");

} else if (gNumber == "2")  {

     Term = "value"

     TermPlural = "values"

     Definition = "A number and unit that together represent the result of a measurement or calculation, e.g. 100 meters."

     gotoAndPlay("input");

} else if (gNumber == "3")  {

     Term = "unit"

     TermPlural = "units"

     Definition = "A defined quantity based on a standard, e.g. meter."

     gotoAndPlay("input");

} else if (gNumber == "4")  {

     Term = "base unit"

     TermPlural = "base units"

     Definition = "The seven units from which all other units in the SI system of measurement are derived."

     gotoAndPlay("input");

} else if (gNumber == "5")  {

     Term = "mass"

     TermPlural = "masses"

     Definition = "The amount of matter in an object. It can also be defined as the property of matter that leads to gravitational attractions between objects and therefore gives rise to weight."

     gotoAndPlay("input");

} else if (gNumber == "6")  {

     Term = "weight"

     TermPlural = "weights"

     Definition = "A measure of the force of gravitational attraction between an object and a significantly large body, such as the earth or the moon."

     gotoAndPlay("input");

} else if (gNumber == "7")  {

     Term = "matter"

     Definition = "Anything that has mass and occupies space."

     gotoAndPlay("input");

} else if (gNumber == "8")  {

     Term = "absolute zero"

     Definition = "Zero kelvins (0 K), the lowest possible temperature, equivalent to -273.15 °C. It is the point beyond which motion can no longer be decreased."

     gotoAndPlay("input");

} else if (gNumber == "9")  {

     Term = "precision"

     Definition = "The closeness in value of a series of measurements of the same entity."

     gotoAndPlay("input");

} else if (gNumber == "10")  {

     Term = "accuracy"

     Definition = "How closely a measured value approaches the true value of a property."

     gotoAndPlay("input");

} else {

     txt_defNumber.text = "";

     txt_incorrect_number.text = "Please type a number from 1 to 10.";

}

}

}

This topic has been closed for replies.
Correct answer ClayUUID

Since you only want a response when Enter is pressed after typing something into the input field, you should only add they keyboard listener to the input field, not the entire document. And if you're using the value as a number, you should be converting it to a number. And a switch statement would be so much more efficient than a chain of if/else ifs.

// lexically scoped reference to local scope

var _this = this;

// give component time to initialize

cjs.Ticker.on("tick", inputInit, this, true);

// add keyboard event listener

function inputInit() {

    document.getElementById("myInputBox").onkeydown = reportKeyDown;

}

// keyboard event handler

function reportKeyDown(evt) {

    if (evt.key === "Enter" || evt.keyCode === 13) {

        var targ = evt.target;

        var gNumber = parseInt(targ.value, 10);

        switch (gNumber) {

            case 1:

                Term = "chemistry";

                Definition = "The study of the structure and behavior of matter.";

                break;

            case 2:

                Term = "value";

                TermPlural = "values";

                Definition = "A number and unit that together represent pizza.";

                break;

            // yadda yadda etc...

            default:

                targ.value = "";

                _this.txt_incorrect_number.text = "Please type a number from 1 to 10.";

        }

        if (gNumber >= 1 && gNumber <= 10) {

            _this.gotoAndPlay("input");

        }

    }

}

That being said, requiring people to type a number into a text box to select an option sounds like a holdover from the DOS era. Why not just give them buttons to click on?

2 replies

C
ClayUUIDCorrect answer
Legend
May 24, 2019

Since you only want a response when Enter is pressed after typing something into the input field, you should only add they keyboard listener to the input field, not the entire document. And if you're using the value as a number, you should be converting it to a number. And a switch statement would be so much more efficient than a chain of if/else ifs.

// lexically scoped reference to local scope

var _this = this;

// give component time to initialize

cjs.Ticker.on("tick", inputInit, this, true);

// add keyboard event listener

function inputInit() {

    document.getElementById("myInputBox").onkeydown = reportKeyDown;

}

// keyboard event handler

function reportKeyDown(evt) {

    if (evt.key === "Enter" || evt.keyCode === 13) {

        var targ = evt.target;

        var gNumber = parseInt(targ.value, 10);

        switch (gNumber) {

            case 1:

                Term = "chemistry";

                Definition = "The study of the structure and behavior of matter.";

                break;

            case 2:

                Term = "value";

                TermPlural = "values";

                Definition = "A number and unit that together represent pizza.";

                break;

            // yadda yadda etc...

            default:

                targ.value = "";

                _this.txt_incorrect_number.text = "Please type a number from 1 to 10.";

        }

        if (gNumber >= 1 && gNumber <= 10) {

            _this.gotoAndPlay("input");

        }

    }

}

That being said, requiring people to type a number into a text box to select an option sounds like a holdover from the DOS era. Why not just give them buttons to click on?

marliton
Community Expert
marlitonCommunity Expert
Community Expert
April 8, 2019

Hi. Here, you can see a good example of Keyboard event use with Js: Beginning HTML5 Games with CreateJS - Brad Manderscheid - Google Books

Marlon Ceballos
C
Chemistry guyAuthor
Inspiring
April 8, 2019

Thanks for the help. First, I should apologize for my ignorance. I confess that I am almost totally ignorant of javascript, and I was never very proficient with actionscript. I'm a chemistry textbook author, and I've made a lot of computer-based tools that support the text (preparatorychemistry.com). Because I have always learned just enough to do what I wanted to do and then swiftly forgotten what I learned, and because I don't have the time to start learning javascript from scratch, I'm am probably making some embarrassing rookie mistakes. With that said, based on the reference you suggested, I tried the following code.

this.setControls = function() {

document.onkeydown = this.handleKeyDown.bind(this);

}

this.handleKeyDown = function (e) {

e = !e ? window.event : e;

switch (e.keycode) {

case ENTER:

this.gotoAndPlay(0);   //just to see if I could make something happen

}

}

The situation is that I have a textInput component called inputNumber on the stage. I want the user to be able to type a number and press ENTER, at which time, I do several things. 

O
onlinedev
Participating Frequently
May 24, 2019

Check out this post In Animate html5 canvas how do I add key press actions to buttons?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices