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 22 matching lines @@
     /**
      * Whether or not the keyboard's input element should be numerical
      * or password.
      */
     enablePassword: {
       type: Boolean,
       value: false
     },
 
     /**
-     * Whether or not the keyboard's submit button should be shown.
+     * Whether or not the keyboard's input should be shown.
      */
-    enableSubmitButton: {
+    enableInputShown: {
       type: Boolean,
-      value: false
+      notify: true,
+      value: false,
+      observer: 'showInput_'
     },
 
     /** The value stored in the keyboard's input element. */
     value: {
       type: String,
       notify: true,
       value: '',
       observer: 'onPinValueChange_'
     }
   },
 
   /**
    * Gets the container holding the password field.
    * @type {!HTMLInputElement}
    */
   get inputElement() {
     return this.$$('#pin-input');
   },
 
+  /**
+   * Shows or hides the input element.
+   * @param {boolean} show
+   * @private
+   */
+  showInput_: function(show) {

[jdufault, 2016/08/24 01:35:10]

Use a property binding

[sammiequon, 2016/08/25 18:12:33]

Done.

+    this.$$('#pin-input').hidden = !show;
+  },
+
   /** Transfers focus to the input element. */
   focus: function() {
     this.$$('#pin-input').focus();
   },
 
   /**
    * 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
+  /**
+   * Called when the user wants to erase the last character of the entered
    *  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;
+    }
+
+    this.value += String.fromCharCode(code);
+  },
+
+  /**
    * 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';
   }
 });