I need to change in a text input the character '.' to ',' while typing. In IE I change the keyCode event property in the keypress event, like this

document.getElementById('mytext').onkeypress = 
 function (evt) {
  var e = evt || window.event;
  if (e.keyCode && e.keyCode==46)
   e.keyCode = 44;
  else if (e.which && e.which==46) {
   e.which = 44;
  }
 };

but it seemes that in Firefox it's impossible to change characters typed in key events. Any suggestions?

I need to change in a text input the character '.' to ',' while typing. In IE I change the keyCode event property in the keypress event, like this

document.getElementById('mytext').onkeypress = 
 function (evt) {
  var e = evt || window.event;
  if (e.keyCode && e.keyCode==46)
   e.keyCode = 44;
  else if (e.which && e.which==46) {
   e.which = 44;
  }
 };

but it seemes that in Firefox it's impossible to change characters typed in key events. Any suggestions?

• javascript
• dom-events

• 1 Why would you want this? To me as a user it would feel a bit odd that even if I type '.' it would show ',' in the input field. I would probably think I've hit the wrong key and try again. – Gene Commented Oct 20, 2008 at 12:31
• Concur. I would assume that the browser is going south, and restart it. When that didn't work, I would start avoiding the web site. – Chris Noe Commented Oct 20, 2008 at 12:43
• To the above menters (and the next people wondering!): my French version of Excel does that for the numeric keypad dot... That's because French people (and some other nationalities) use ma as decimal separator, not dot. I suppose Pier has a similar need. – PhiLho Commented Oct 20, 2008 at 13:19
• 1 @PhiLho As a Finn I'm used to having , as decimal separator and as a coder obviously the . Regardless of what the national decimal separator is changing the user input when typed just seems wrong. It's not that tricky to support both or replace them when the value is actually used or eg. onfocuslost – Gene Commented Oct 20, 2008 at 13:39

6 Answers 6

Try this. It works on all browsers:

window.onload = function () {
    var input = document.getElementById("mytext");

    input.onkeypress = function () {
        var evt = arguments[0] || event;
        var char = String.fromCharCode(evt.which || evt.keyCode);

        // Is it a period?
        if (char == ".") {
            // Replace it with a ma
            input.value += ",";

            // Cancel the original event
            evt.cancelBubble = true;
            return false;
        }
    }
};

Update: Pier Luigi pointed out a problem with the above. It doesn't take care of the caret position not being at the end of the text. It will append the mand to the end even if you're inserting some text to the value.

The solution would be, instead of appending a ma, to simulate a keypress event for the ma key. Unfortunately the way dispatching of synthetic events work in different browsers seems to show a lot of variety and isn't an easy feat. I'll see if I can find a nice and generic method for it.

Assume that all properties in an Event object are immutable. The DOM spec doesn't address what happens when you change those values manually.

Here's the logic you need: listen for all key events. If it's a period, suppress the event, and manually add the ma at the cursor position. (Here's a code snippet for inserting arbitrary text at the cursor position.)

You'd suppress the event in Firefox by calling event.preventDefault(); this tells the browser not to go ahead with the default action associated with this event (in this case, typing the character). You'd suppress the event in IE by setting event.returnValue to false.

If it's not a period, return early from your handler.

Technically you just want to replace all dots with mas.

document.getElementById('mytext').onkeyup = function(){
    this.value = this.value.replace('.', ',');
}

If I look at the official Document Object Model Events document, mouse events fields are defined as read-only. Keyboard events are not defined there, I suppose Mozilla followed this policy for them.

So basically, unless there is some smart trick, you cannot alter an event the way you want. You probably have to intercept the key and insert the char (raw or translated) where the caret is, the way JS HTML editors do.

Does this really need to be done on the fly? If you are collecting the information to be posted to a form or submitted to a database, would it not be better to modify the data once it was submitted? That way the user never sees the confusing change.

This is possible now by intercepting and cancelling the default keydown event and using HTMLInputElement.setRangeText to insert your desired character. This would look something like this:

    document.addEventListener('keydown', $event => {
      if($event.code === 'Period'){
        $event.preventDefault();
        let inputEl = document.querySelector("#my-input");
        inputEl.setRangeText(
          ',',
          inputEl.selectionStart,
          inputEl.selectionEnd,
          "end"
        );
      }
    })

setRangeText will insert text at the cursor position in a given input. The "end" string as the last argument sets the cursor to the end of the inserted content.

More info here: https://developer.mozilla/en-US/docs/Web/API/HTMLInputElement/setRangeText