diff --git a/src/platforms/h5/components/app/popup/actionSheet.vue b/src/platforms/h5/components/app/popup/actionSheet.vue
index d60cdaf2b7c2cdf679ebc0e4ba86415891882cbb..e958639698080590c02aea6f1bf0ef38752d97ce 100644
--- a/src/platforms/h5/components/app/popup/actionSheet.vue
+++ b/src/platforms/h5/components/app/popup/actionSheet.vue
@@ -40,13 +40,19 @@
       </div>
       <div :style="popupStyle.triangle" />
     </div>
+    <keypress
+      :disable="!visible"
+      @esc="_close(-1)"
+    />
   </uni-actionsheet>
 </template>
 <script>
 import popup from './mixins/popup'
+import keypress from '../../../helpers/keypress'
 
 export default {
   name: 'ActionSheet',
+  components: { keypress },
   mixins: [popup],
   props: {
     title: {
diff --git a/src/platforms/h5/components/app/popup/modal.vue b/src/platforms/h5/components/app/popup/modal.vue
index 0f3542ab53df7f7c12862be7a407019aca1944c2..eeae9afff15ced86a0a9dc22bfc3b50f0f69ae58 100644
--- a/src/platforms/h5/components/app/popup/modal.vue
+++ b/src/platforms/h5/components/app/popup/modal.vue
@@ -38,13 +38,21 @@
           </div>
         </div>
       </div>
+      <keypress
+        :disable="!visible"
+        @esc="_close('cancel')"
+        @enter="_close('confirm')"
+      />
     </uni-modal>
   </transition>
 </template>
 <script>
 import transition from './mixins/transition'
+import keypress from '../../../helpers/keypress'
+
 export default {
   name: 'Modal',
+  components: { keypress },
   mixins: [transition],
   props: {
     title: {
diff --git a/src/platforms/h5/helpers/keypress.js b/src/platforms/h5/helpers/keypress.js
new file mode 100644
index 0000000000000000000000000000000000000000..172e7237ce4c83f0b3ab771be8dc4e589728d6f5
--- /dev/null
+++ b/src/platforms/h5/helpers/keypress.js
@@ -0,0 +1,40 @@
+export default {
+  name: 'Keypress',
+  props: {
+    disable: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted () {
+    const keyNames = {
+      esc: ['Esc', 'Escape'],
+      tab: 'Tab',
+      enter: 'Enter',
+      space: [' ', 'Spacebar'],
+      up: ['Up', 'ArrowUp'],
+      left: ['Left', 'ArrowLeft'],
+      right: ['Right', 'ArrowRight'],
+      down: ['Down', 'ArrowDown'],
+      delete: ['Backspace', 'Delete', 'Del']
+    }
+    const listener = ($event) => {
+      if (this.disable) {
+        return
+      }
+      const keyName = Object.keys(keyNames).find(key => {
+        const keyName = $event.key
+        const value = keyNames[key]
+        return value === keyName || (Array.isArray(value) && value.includes(keyName))
+      })
+      if (keyName) {
+        this.$emit(keyName, $event)
+      }
+    }
+    document.addEventListener('keydown', listener)
+    this.$once('hook:beforeDestroy', () => {
+      document.removeEventListener('keydown', listener)
+    })
+  },
+  render: () => null
+}
diff --git a/src/platforms/h5/view/components/picker/index.vue b/src/platforms/h5/view/components/picker/index.vue
index 92ad5fececcc288242c5e18af66e5258839b80d5..46457b3e93787b9d4b7c11092d38dab3e8e42c2c 100644
--- a/src/platforms/h5/view/components/picker/index.vue
+++ b/src/platforms/h5/view/components/picker/index.vue
@@ -67,6 +67,11 @@
     <div>
       <slot />
     </div>
+    <keypress
+      :disable="!visible"
+      @esc="_cancel"
+      @enter="_change"
+    />
   </uni-picker>
 </template>
 
@@ -74,6 +79,7 @@
 import { emitter } from 'uni-mixins'
 import { formatDateTime } from 'uni-shared'
 import popup from '../../../components/app/popup/mixins/popup'
+import keypress from '../../../helpers/keypress'
 
 function getDefaultStartValue () {
   if (this.mode === mode.TIME) {
@@ -126,6 +132,7 @@ const fields = {
 }
 export default {
   name: 'Picker',
+  components: { keypress },
   mixins: [emitter, popup],
   props: {
     name: {