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-styles/color.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
@@ skipping 20 matching lines @@
       }
 
       .input-non-pin {
         direction: rtl;
       }
 
       .row {
         display: flex;
       }
 
+      .row.first-row {
+        height: 64px;
+      }
+
       .digit-button {
         align-items: center;
         background: none;
         border-radius: 20px;
         box-sizing: border-box;
         color: var(--paper-blue-grey-700);
         display: flex;
         flex-direction: column;
         font-size: 32px;
         height: 70px;
@@ skipping 54 matching lines @@
         width: 100%;
       }
 
       .digit-button inner-text {
         color: var(--paper-blue-grey-700);
         display: flex;
         flex-direction: column;
         height: 52px;
       }
 
-      .first-row {
-        height: 64px;
-        min-height: 64px;
-        padding: 28px 15px 12px 15px;
-      }
-
       #pin-input {
         -webkit-text-security: disc;
         background-color: white;
         border: 0;
         box-sizing: border-box;
         font-size: 18px;
         height: 64px;
         left: 20px;
         outline: 0;
         padding: 28px 3px 12px 3px;
@@ skipping 16 matching lines @@
 
       /* 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="container-constrained-width">
-        <div class="row">
+        <div class="row first-row">
           <input id="pin-input" type="[[getInputType_(enablePassword)]]"
                  class$="[[getInputClass_(value)]]
                          [[getSubmitHiddenClass_(enableSubmitButton)]]"
                  placeholder="[[getInputPlaceholder_(enablePassword)]]"
                  value="{{value::input}}"
-                 on-keydown="onInputKeyDown_"></input>
-          <paper-button class$="digit-button first-row submit-button
-                                [[getSubmitHiddenClass_(enableSubmitButton)]]"
-                        on-tap="firePinSubmitEvent_">
-            <div class$="icon-container [[getSubmitClass_(value)]]">
-                <iron-icon class="icon" icon="pin-keyboard:forward"><iron-icon>
-            </div>
-          </paper-button>
+                 on-keydown="onInputKeyDown_"
+                 hidden>
+          </input>
         </div>
 
         <div class="row keyboard">

[jdufault, 2016/08/19 17:28:18]

Can the on-keypress and on-keydown events be captured by the "root" div or this
div?

[sammiequon, 2016/08/23 17:28:11]

Done.

-          <paper-button class="digit-button" on-tap="onNumberTap_" value="1">
+          <paper-button class="digit-button" on-keypress="onKeyPress_"
+                        on-keydown="onKeyDown_" on-tap="onNumberTap_" value="1">
             <inner-text>$i18n{pinKeyboard1}</inner-text>
           </paper-button>
-          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
-                        value="2">
+          <paper-button class="digit-button center-button"
+                        on-keypress="onKeyPress_" on-keydown="onKeyDown_"
+                        on-tap="onNumberTap_" value="2">
             <inner-text>$i18n{pinKeyboard2}</inner-text>
           </paper-button>
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="3">
+          <paper-button class="digit-button" on-keypress="onKeyPress_"
+                        on-keydown="onKeyDown_" 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">
+          <paper-button class="digit-button" on-keypress="onKeyPress_"
+                        on-keydown="onKeyDown_" on-tap="onNumberTap_" value="4">
             <inner-text>$i18n{pinKeyboard4}</inner-text>
           </paper-button>
-          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
-                        value="5">
+          <paper-button class="digit-button center-button"
+                        on-keypress="onKeyPress_" on-keydown="onKeyDown_"
+                        on-tap="onNumberTap_" value="5">
             <inner-text>$i18n{pinKeyboard5}</inner-text>
           </paper-button>
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="6">
+          <paper-button class="digit-button" on-keypress="onKeyPress_"
+                        on-keydown="onKeyDown_" 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">
+          <paper-button class="digit-button" on-keypress="onKeyPress_"
+                        on-keydown="onKeyDown_" on-tap="onNumberTap_" value="7">
             <inner-text>$i18n{pinKeyboard7}</inner-text>
           </paper-button>
-          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
-                        value="8">
+          <paper-button class="digit-button center-button"
+                        on-keypress="onKeyPress_" on-keydown="onKeyDown_"
+                        on-tap="onNumberTap_" value="8">
             <inner-text>$i18n{pinKeyboard8}</inner-text>
           </paper-button>
-          <paper-button class="digit-button" on-tap="onNumberTap_" value="9">
+          <paper-button class="digit-button" on-keypress="onKeyPress_"
+                        on-keydown="onKeyDown_" on-tap="onNumberTap_" value="9">
             <inner-text>$i18n{pinKeyboard9}</inner-text>
           </paper-button>
         </div>
         <div class="row keyboard">
           <div class="digit-button"></div>
-          <paper-button class="digit-button center-button" on-tap="onNumberTap_"
-                        value="0">
+          <paper-button class="digit-button center-button"
+                        on-keypress="onKeyPress_" on-keydown="onKeyDown_"
+                        on-tap="onNumberTap_" value="0">
             <inner-text>$i18n{pinKeyboard0}</inner-text>
           </paper-button>
-          <paper-button class="digit-button clear-button" on-tap="onPinClear_">
+          <paper-button class="digit-button clear-button"
+                        on-keypress="onKeyPress_" on-keydown="onKeyDown_"
+                        on-tap="onPinClear_">
             <div class="icon-container">
               <iron-icon class="icon" icon="cr:clear"><iron-icon>
             </div>
             <inner-text class="icon-subheading">
               $i18n{pinKeyboardClear}
             </inner-text>
           </paper-button>
         </div>
       </div>
     </div>
   </template>
   <script src="pin_keyboard.js"></script>
 </dom-module>