How to change characters entered in Firefox

Question

I need to change the '.' Character in the text input to ',' when typing. In IE, I change the property of the keyCode event 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 seems that in Firefox it is not possible to change the characters entered in key events. Any suggestions?

Answer 1

Try it. It works in 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 comma input.value += ","; // Cancel the original event evt.cancelBubble = true; return false; } } }; 

Update: Pier Luigi pointed out a problem with the above. He does not care that the carriage position is not at the end of the text. It will add the command to the end, even if you insert text in the value.

The solution is to instead of adding a comma, simulate a keypress event for a comma. Unfortunately, the way synthetic events are sent to different browsers seems to show a lot of variety and not an easy feat. I will see if I can find a good and general method for him.

Answer 2

Suppose all properties of an Event object are immutable. The DOM specification does not take into account what happens when these values ​​are changed manually.

The logic is here: listen to all the key events. If this is a period, suppress the event and manually add a comma to the cursor position. (Here's a snippet of code to insert arbitrary text at the cursor position.)

You suppressed an event in Firefox by calling event.preventDefault() ; this tells the browser not to continue the default action associated with this event (in this case, typing a character). You would suppress the event in IE by setting event.returnValue to false .

If this is not a period, return earlier from your handler.

Answer 3

Technically, you just want to replace all dots with commas.

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

Answer 4

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

So, in principle, if there is no smart trick, you cannot change the event the way you want. You will probably have to intercept the key and insert the char (raw or translated) where the caret is, as the JS HTML editors do.

Answer 5

Do I need to do this on the fly? If you are collecting information that must be submitted in a form or submitted to a database, would it not be better to change the data after it is submitted? Thus, the user never sees vague changes.