diff --git a/src/compiler/codegen/events.js b/src/compiler/codegen/events.js
index 9b0c143e9d9..26dc1cf9c80 100644
--- a/src/compiler/codegen/events.js
+++ b/src/compiler/codegen/events.js
@@ -29,9 +29,9 @@ const modifierCode: { [key: string]: string } = {
   shift: genGuard(`!$event.shiftKey`),
   alt: genGuard(`!$event.altKey`),
   meta: genGuard(`!$event.metaKey`),
-  left: genGuard(`$event.button !== 0`),
-  middle: genGuard(`$event.button !== 1`),
-  right: genGuard(`$event.button !== 2`)
+  btnleft: genGuard(`$event.button !== 0`),
+  btnmiddle: genGuard(`$event.button !== 1`),
+  btnright: genGuard(`$event.button !== 2`)
 }
 
 export function genHandlers (events: ASTElementHandlers, native?: boolean): string {
diff --git a/test/unit/features/directives/on.spec.js b/test/unit/features/directives/on.spec.js
index e518e63f1f7..242af5aa432 100644
--- a/test/unit/features/directives/on.spec.js
+++ b/test/unit/features/directives/on.spec.js
@@ -224,9 +224,9 @@ describe('Directive v-on', () => {
       el,
       template: `
         <div>
-          <div ref="left" @mousedown.left="foo">left</div>
-          <div ref="right" @mousedown.right="foo1">right</div>
-          <div ref="middle" @mousedown.middle="foo2">right</div>
+          <div ref="left" @mousedown.btnleft="foo">left</div>
+          <div ref="right" @mousedown.btnright="foo1">right</div>
+          <div ref="middle" @mousedown.btnmiddle="foo2">right</div>
         </div>
       `,
       methods: {
@@ -288,6 +288,8 @@ describe('Directive v-on', () => {
       e.keyCode = 40
     })
     expect(spy).toHaveBeenCalledTimes(3)
+    // reset config
+    Vue.config.keyCodes = Object.create(null)
   })
 
   it('should bind to a child component', () => {
@@ -483,4 +485,37 @@ describe('Directive v-on', () => {
       triggerEvent(vm.$el, 'click')
     }).not.toThrow()
   })
+
+  // Github Issue #5046
+  it('should support keyboard modifier', () => {
+    const spyLeft = jasmine.createSpy()
+    const spyRight = jasmine.createSpy()
+    const spyUp = jasmine.createSpy()
+    const spyDown = jasmine.createSpy()
+    vm = new Vue({
+      el,
+      template: `
+        <div>
+          <input ref="left" @keydown.left="foo"></input>
+          <input ref="right" @keydown.right="foo1"></input>
+          <input ref="up" @keydown.up="foo2"></input>
+          <input ref="down" @keydown.down="foo3"></input>
+        </div>
+      `,
+      methods: {
+        foo: spyLeft,
+        foo1: spyRight,
+        foo2: spyUp,
+        foo3: spyDown
+      }
+    })
+    triggerEvent(vm.$refs.left, 'keydown', e => { e.keyCode = 37 })
+    triggerEvent(vm.$refs.right, 'keydown', e => { e.keyCode = 39 })
+    triggerEvent(vm.$refs.up, 'keydown', e => { e.keyCode = 38 })
+    triggerEvent(vm.$refs.down, 'keydown', e => { e.keyCode = 40 })
+    expect(spyLeft).toHaveBeenCalled()
+    expect(spyRight).toHaveBeenCalled()
+    expect(spyUp).toHaveBeenCalled()
+    expect(spyDown).toHaveBeenCalled()
+  })
 })