diff --git a/src/components/SimpleKeyboard.vue b/src/components/SimpleKeyboard.vue
index b9678f9..7928b15 100644
--- a/src/components/SimpleKeyboard.vue
+++ b/src/components/SimpleKeyboard.vue
@@ -217,15 +217,15 @@ export default {
         cursor: pointer;
         padding: 0;
         box-sizing: content-box;
-        &:hover
-          color: #333;
-          background-color: #d6d6d6;
-          border-color: #adadad;
         &:active
           transform: scale(.98);
           color: #333;
           background-color: #d4d4d4;
           border-color: #8c8c8c;
+        &:hover
+          color: #333;
+          background-color: #d6d6d6;
+          border-color: #adadad;
       & .hg-button-bksp
           flex: 65 1 0%;
           background-image: url("../images/backspace.svg");
diff --git a/src/components/keyboard-input.vue b/src/components/keyboard-input.vue
index e0c45c0..fa09b05 100644
--- a/src/components/keyboard-input.vue
+++ b/src/components/keyboard-input.vue
@@ -103,7 +103,7 @@ export default {
       }, 0)
     },
     onKeyPress (button) {
-      if (button === '{lock}' || button === '{shift}' || button === '{change}' || button === '{bksp}' || button === '{clear}') {
+      if (button === '{lock}' || button === '{shift}' || button === '{change}' || button === '{bksp}' || button === '{clear}' || button === '{bksp}') {
         this.$nextTick(() => {
           this.inputEle.focus()
         })
@@ -114,7 +114,9 @@ export default {
       if (button === '{clear}') {
         this.inputValue = ''
       }
-      // console.log('onKeyPress', button)
+      if (button === '{bksp}') {
+        this.inputValue = this.inputValue.substring(0, this.inputValue.length - 1)
+      }
     }
   }
 }