Pin keyboard works with virtual keyboard.

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview
  * 'pin-keyboard' is a keyboard that can be used to enter PINs or more generally
  * numeric values.
  *
  * Properties:
@@ skipping 52 matching lines @@
   get inputElement() {
     return this.$$('#pin-input');
   },
 
   /** Transfers focus to the input element. */
   focus: function() {
     this.$$('#pin-input').focus();
   },
 
   /**
+   * Sets the value of the pin keyboard. Used by the user pod to ensure the
+   * password element has the same value as the pin keyboard.
+   * @param {string} newValue
+   */
+  setNewValue: function(newValue) {
+    this.value = newValue;

[jdufault, 2016/08/19 01:06:47]

We should be able to assign to value directly which means this function
shouldn't be needed.

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

Done.

+  },
+
+  /**
    * Called when a keypad number has been tapped.
    * @param {!{target: !PaperButtonElement}} event
    * @private
    */
   onNumberTap_: function(event, detail) {
     var numberValue = event.target.getAttribute('value');
     this.value += numberValue;
-
-    // If a number button is clicked, we do not want to switch focus to the
-    // button, therefore we transfer focus back to the input, but if a number
-    // button is tabbed into, it should keep focus, so users can use tab and
-    // spacebar/return to enter their PIN.
-    if (!event.target.receivedFocusFromKeyboard)
-      this.focus();
   },
 
   /** Fires a submit event with the current PIN value. */
   firePinSubmitEvent_: function() {
     this.fire('submit', { pin: this.value });
   },
 
   /**
    * Fires an update event with the current PIN value. The event will only be
    * fired if the PIN value has actually changed.
    * @param {string} value
    * @param {string} previous
    */
   onPinValueChange_: function(value, previous) {
     if (value != previous)
       this.fire('pin-change', { pin: value });
   },
 
   /** Called when the user wants to erase the last character of the entered

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

Please fix this comment's formatting, ie,

/**
 * Called when ...
 */

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

Done.

    *  PIN value.
    */
   onPinClear_: function() {
     this.value = this.value.substring(0, this.value.length - 1);
   },
 
   /** Called when a key event is pressed while the input element has focus. */
   onInputKeyDown_: function(event) {
     // Up/down pressed, swallow the event to prevent the input value from
     // being incremented or decremented.
     if (event.keyCode == 38 || event.keyCode == 40) {
       event.preventDefault();
       return;
     }
 
     // Enter pressed.
     if (event.keyCode == 13) {
       this.firePinSubmitEvent_();
       event.preventDefault();
       return;
     }
   },
 
   /**
+   * Keypress does not handle backspace but handles the char codes nicely, so we
+   * have a seperate event to process the backspaces.
+   * @param {Event} e Keypress Event object.
+   * @private
+   */
+  onKeyDown_: function(event) {
+    // Backspace pressed.
+    if (event.keyCode == 8) {
+      this.onPinClear_();
+      event.preventDefault();
+      return;
+    }
+  },
+
+  /**
+   * Called when a key press event is fired while the number button is focused.
+   * Ideally we would want to pass focus back to the input element, but the we
+   * cannot or the virtual keyboard will keep poping up.
+   * @param {Event} e Keypress Event object.
+   * @private
+   */
+  onKeyPress_: function(event) {
+    var code = event.keyCode;
+
+    // Enter pressed.
+    if (code == 13) {
+      this.firePinSubmitEvent_();
+      event.preventDefault();
+      return;
+    }
+
+    var stringValue = String.fromCharCode(code);
+    this.value += stringValue;

[jdufault, 2016/08/19 01:06:47]

eliminate stringValue temp

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

Done.

+  },
+
+  /**
    * Changes the color of the submit button if PIN is ready.
    * @param {string} value
    * @private
    */
   getSubmitClass_: function(value) {
     return value.length > 0 ? 'ready-background' : '';
   },
 
   /**
    * Computes whether the input type for the pin input should be password or
@@ skipping 35 matching lines @@
 
   /**
    * Computes if the submit button is visible.
    * @param {boolean} submitEnabled
    * @private
    */
   getSubmitHiddenClass_: function(submitEnabled) {
     return submitEnabled ? '' : 'submit-button-hidden';
   }
 });