3

I'm learning object oriented javascript. As i'm passionate of typography, I'm making an OO js simple HTML type editor that listen to the "duration" of a pressed key in order to modify the weight of each letter with a specific varation of the typeface.

So far I have a working version you can see live on codepen: http://codepen.io/Pggo/pen/vLNKve just type few letters on your keyboard at a different duration on hitting keys to test!

A code sample: of my js file (see full code on codepen):

    // ...
    // get duration of the key pressed event
    var duration = ( e.timeStamp - pressed[e.which] ) / 1000;

    // use .fromCharcode to get the alphabetical equivalent of the .which notation
    var letter = String.fromCharCode(e.which);

    // convert letter to lowercase (comes in uppercase)
    var lowerCaseLetter = letter.toLowerCase();
    // ...

I'm trying to achieve the following goal:

  • Display special characters such as parenthesis or punctuation.
  • Auto return to next line when .length of the elems of my class > n.

The question:

Is there any way to make the task of using all keybord "normal" behaviors easier? (I tried first with the textarea texteditable HTML tag but it's not easy to get the events of that guy with js).

Every input appreciated

EJoshuaS - Stand with Ukraine
  • 11,977
  • 56
  • 49
  • 78
gastngouron
  • 461
  • 1
  • 5
  • 15

1 Answers1

2

jQuery is pretty weird in this case: .keyup() and .keydown() will both give you javascript keycodes, not ASCII keycodes like String.fromCharCode() wants. However, .keypress() will give you the right value. Accounting for this, you can make some slight changes to your app and it should work as intended: http://codepen.io/anon/pen/eJpzam.

Although, you might want to work on handling multiple characters at once, as this solution only handles one at a time.

John Fish
  • 1,060
  • 1
  • 7
  • 13
  • Thanks a lot for your time and answer John. I'm playing around with your code and, as you said, jQuery seems to be perfectly tailored for this task. Again, thank you for your input! – gastngouron Dec 12 '15 at 19:02