Pin keyboard works with virtual keyboard.

chrome/browser/resources/chromeos/quick_unlock/pin_keyboard.html

 <!-- TODO(crbug.com/603217): Use i18n instead of string literals. Figure out
                              what i18n to use for keypad, ie, does 1 ABC make
                              sense in every scenario? -->
 
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
@@ skipping 113 matching lines @@
       }
 
       #pin-input[has-content] {
         opacity: var(--dark-primary-opacity);
       }
 
       #pin-input[is-input-rtl] {
         direction: rtl;
       }
 
+      #pin-input[is-invisible] {
+        visiblity: hidden;
+      }
+
       :host(:not([enable-submit-button])) #pin-input {
         left: 0;
         text-align: center;
         width: 180px;
       }
 
       hr {
         border: 0;
         border-bottom: 1px solid #000;
         left: 10px;
         margin: 0;
         opacity: 0.14;
         position: relative;
         width: 160px;
       }
 
       #pin-input[type=number]::-webkit-inner-spin-button,
       #pin-input[type=number]::-webkit-outer-spin-button {
         -webkit-appearance: none;
         margin: 0;
       }
 
       /* Ensure that all children of paper-button do not consume events. This
        * simplifies the event handler code. */
       paper-button * {
         pointer-events: none;
       }
     </style>
 
-    <div id="root">
+    <div id="root" on-keypress="onKeyPress_" on-keydown="onKeyDown_">
       <div id="container-constrained-width">
-        <div class="row">
+        <div class="row first-row">
           <input id="pin-input" type="[[getInputType_(enablePassword)]]"
                  is-input-rtl$="[[isInputRtl_(value)]]"
                  has-content$="[[hasInput_(value)]]"
                  placeholder="[[getInputPlaceholder_(enablePassword)]]"
                  value="{{value::input}}"
-                 on-keydown="onInputKeyDown_">
+                 on-keydown="onInputKeyDown_"
+                 is-invisible$=[[hideInput]]>
           </input>
-          <paper-icon-button icon="pin-keyboard:arrow-forward"
-                             class="digit-button submit-button"
-                             disabled="[[!hasInput_(value)]]"
-                             hidden="[[!enableSubmitButton]]"
-                             on-tap="firePinSubmitEvent_">
-          </paper-icon-button>
         </div>
         <hr>
-        <div class="row keyboard top-row">
+        <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="1">
             <inner-text>$i18n{pinKeyboard1}</inner-text>
           </paper-button>
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="2">
+          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
+                        value="2">
             <inner-text>$i18n{pinKeyboard2}</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="3">
             <inner-text>$i18n{pinKeyboard3}</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="4">
             <inner-text>$i18n{pinKeyboard4}</inner-text>
           </paper-button>
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="5">
+          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
+                        value="5">
             <inner-text>$i18n{pinKeyboard5}</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="6">
             <inner-text>$i18n{pinKeyboard6}</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
           <paper-button class="digit-button" on-tap="onNumberTap_" value="7">
             <inner-text>$i18n{pinKeyboard7}</inner-text>
           </paper-button>
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="8">
+          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
+                        value="8">
             <inner-text>$i18n{pinKeyboard8}</inner-text>
           </paper-button>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="9">
             <inner-text>$i18n{pinKeyboard9}</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard bottom-row">
           <div class="digit-button"></div>
           <paper-button class="digit-button" on-tap="onNumberTap_" value="0">
             <inner-text>$i18n{pinKeyboard0}</inner-text>
           </paper-button>
           <paper-icon-button class="digit-button backspace-button"
                              disabled="[[!hasInput_(value)]]"
                              on-tap="onPinClear_" icon="pin-keyboard:backspace">
           </paper-icon-button>
         </div>
       </div>
     </div>
   </template>
   <script src="pin_keyboard.js"></script>
 </dom-module>