P5.js: Period detecting as backspace/delete

[MarkGamed7794]

Nature of issue?

• [x] Found a bug
• [ ] Existing feature enhancement
• [ ] New feature request

Most appropriate sub-area of p5.js?

• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] Events
• [ ] Image
• [x] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Which platform were you using when you encountered this?

• [ ] Mobile/Tablet (touch devices)
• [x] Desktop/Laptop
• [ ] Others (specify if possible)

Details about the bug:

• p5.js version: Using p5.js web editor, unsure
• Web browser and version: Chrome, ver 72.0.3626.109
• Operating System: macOS 10.12.6
• Steps to reproduce this:
  

var testStr = '';

function draw(){
  background(220);
  fill(0);
  text(testStr,40,40);
}

function keyTyped(){
    if(key === '-'){testStr += '-';}
  if(key === '.'){testStr += '.';}
  if(keyCode === BACKSPACE || keyCode === DELETE){testStr = testStr.substring(0,testStr.length-2);}
}

Feature enhancement details:

New feature details:

[lmccart]

@MarkGamed7794 thanks for reporting this.
I think there's definitely a bug here, but as a quick fix for your code, you can use function keyPressed() instead of function keyTyped(). This doesn't solve the underlying issue but might help in the meantime.

[vedhant]

@lmccart I have tried digging into what actually causes this problem.
What I found was that there is an issue with event keypress itself. This event is giving out wrong e.keyCode and e.which values which causes this issue. For example, the character '.' has e.which value 190 whereas keypress shows it as 46. Clearly, there is an issue with the event itself and not the underlying code of p5.

Moreover, event keypress is deprecated and the usage of keydown is suggested.

Should we remove p5.prototype._onkeypress and maybe redirect keyTyped() to p5.prototype._onkeydown ?

Share me your thoughts! I would like to work on this.

[outofambit]

@vedhant thanks for investigating this!

Should we remove p5.prototype._onkeypress and maybe redirect keyTyped() to p5.prototype._onkeydown ?

This makes sense to me! @lmccart and @vedhant, do you think we should reimplement some kind of key press filtering to maintain the current behavior of keyTyped(), or remove keyTyped()? I think i'm in favor of that if it's easy to implement, but I don't feel strongly.

[Spongman]

aren't the behaviors of keypressed and keydown quite different? especially with respect to auto-repeat?

[lmccart]

as I recall, last we implemented things keyPressed() would only give capitals letters as the key?
anyway it would be great to go over keyPressed(), keyTyped(), and keyReleased() and update to support the current key functionality across browsers.

[vedhant]

@lmccart can u guide me into what to do next? I want to fix this issue.

[lmccart]

I've pushed a fix for this. However please note that action keys like Delete or Backspace don't get registered by keyTyped, so you should use keyPressed() to detect them. Something like this:

var testStr = '';

function draw() {
  background(220);
  fill(0);
  text(testStr,40,40);
}

function keyTyped() {
  if(key === '-'){testStr += '-';}
  if(key === '.'){testStr += '.';}
}

function keyPressed() {
  if(keyCode === BACKSPACE || keyCode === DELETE){testStr = testStr.substring(0,testStr.length-2);}
}