Safari and Firing Keypress Events with Backspace
Whilst working on a project for a client that uses a lot of jQuery and ASP.NET AJAX, I found that the ASP.NET AjaxControlToolkit control MaskedEditExtender doesn’t quite work in Safari. The symptoms of the problem are the backspace and delete keys not working to clear the text in the mask.
A little too late for my project, there was a fix posted on the project’s Codeplex issue tracker (which I haven’t verified personally). It involves patching AjaxControlToolkit javascript in source to sniff specifically for Webkit browsers and compiling a new AjaxControlToolkit.dll.
Instead, I took the extenders out and replaced them with a custom jQuery date mask. I researched a few of the more popular jQuery plugins that do that, but found they didn’t quite work the way we wanted them to, so I had to roll my own.
Stupidly, I tested mostly in Firefox, and after a while got it working pretty well. I went to test it in Safari, and it didn’t work. I feared all the work I had done was for naught. I took a quick look in Safari’s javascript console and found that Safari wasn’t firing keypress events for the backspace key, which is what my plugin was listening for.
As it turns out, this was a known issue with Webkit browsers. I tested around and figured out that it was just the keypress event that wasn’t being fired. The keydown event was being fired fine. So I switched my plugin to listen to the keydown event instead of the keypress event, and that resolved the issue.
So if you want to support Webkit browsers and you’re doing key press detection for ‘special’ keys, use the keydown event instead of the keypress event. It will save you some frustration.