DOMUI: Fix AF CC field some more.

chrome/browser/resources/options/autofill_edit_creditcard_overlay.js

 // Copyright (c) 2010 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.
 
 cr.define('options', function() {
   const OptionsPage = options.OptionsPage;
 
   // The GUID of the loaded credit card.
   var guid_;
 
@@ skipping 28 matching lines @@
       OptionsPage.prototype.initializePage.call(this);
 
       var self = this;
       $('autoFillEditCreditCardCancelButton').onclick = function(event) {
         self.dismissOverlay_();
       }
       $('autoFillEditCreditCardApplyButton').onclick = function(event) {
         self.saveCreditCard_();
         self.dismissOverlay_();
       }
-      $('creditCardNumber').onkeydown = this.onTextInput_.bind(this);
-      $('creditCardNumber').addEventListener('textInput',
-                                             this.onTextInput_.bind(this));
 
       self.guid_ = '';
       self.storedCCNumber_ = '';
       self.hasEditedNumber_ = false;
       self.clearInputFields_();
       self.connectInputEvents_();
       self.setDefaultSelectOptions_();
     },
 
     /**
-     * Handles the textInput and keydown events.
-     * @private
-     */
-    onTextInput_: function(event) {
-      // For some reason, the textInput event doesn't consider
-      // backspace/deletion an input event, so we have to handle those here.
-      // 8 - backspace
-      // 46 - delete
-      if (event.type == 'keydown' && event.keyCode != '8' &&
-          event.keyCode != '46')
-        return;
-
-      // If the user hasn't edited the text yet, delete it all on edit.
-      if (!this.hasEditedNumber_ &&
-          $('creditCardNumber').value != this.storedCCNumber_) {
-        this.hasEditedNumber_ = true;
-        $('creditCardNumber').value = '';
-      }
-    },
-
-    /**
      * Clears any uncommitted input, and dismisses the overlay.
      * @private
      */
     dismissOverlay_: function() {
       this.clearInputFields_();
       this.guid_ = '';
       this.storedCCNumber_ = '';
       this.hasEditedNumber_ = false;
       OptionsPage.clearOverlays();
     },
@@ skipping 18 matching lines @@
       chrome.send('setCreditCard', creditCard);
     },
 
     /**
      * Connects each input field to the inputFieldChanged_() method that enables
      * or disables the 'Ok' button based on whether all the fields are empty or
      * not.
      * @private
      */
     connectInputEvents_: function() {
-      var self = this;
       $('nameOnCard').oninput = $('creditCardNumber').oninput =
           $('expirationMonth').onchange = $('expirationYear').onchange =
-              function(event) {
-                self.inputFieldChanged_();
-              }
+              this.inputFieldChanged_.bind(this);
     },
 
     /**
      * Checks the values of each of the input fields and disables the 'Ok'
      * button if all of the fields are empty.
      * @private
      */
-    inputFieldChanged_: function() {
+    inputFieldChanged_: function(event) {
       var disabled = !$('nameOnCard').value && !$('creditCardNumber').value;
       $('autoFillEditCreditCardApplyButton').disabled = disabled;
+
+      // If the user hasn't edited the text yet, delete it all on edit.
+      if (!this.hasEditedNumber_ &&
+          event && event.target == $('creditCardNumber') &&

[arv (Not doing code reviews), 2011/01/26 19:27:35]

Why would event be undefined?

[arv (Not doing code reviews), 2011/01/26 19:27:35]

Please create a var for $('creditCardNumber') so that you don't have to call
getElementById 3 times here.

[James Hawkins, 2011/01/26 19:38:30]

This method is called on overlay load w/out a parameter (to set up the initial
button state).

[James Hawkins, 2011/01/26 19:38:30]

Done.

[arv (Not doing code reviews), 2011/01/26 20:00:41]

Please rename the param to opt_event and document it using JSDoc.

[James Hawkins, 2011/01/26 21:31:36]

Done.

+          $('creditCardNumber').value != this.storedCCNumber_) {
+        this.hasEditedNumber_ = true;
+        $('creditCardNumber').value = '';
+      }
     },
 
     /**
      * Sets the default values of the options in the 'Expiration date' select
      * controls.
      * @private
      */
     setDefaultSelectOptions_: function() {
       // Set the 'Expiration month' default options.
       var expirationMonth = $('expirationMonth');
@@ skipping 67 matching lines @@
     /**
      * Loads the credit card data from |creditCard|, sets the input fields based
      * on this data and stores the GUID of the credit card.
      * @private
      */
     loadCreditCard_: function(creditCard) {
       this.setInputFields_(creditCard);
       this.inputFieldChanged_();
       this.guid_ = creditCard['guid'];
       this.storedCCNumber_ = creditCard['creditCardNumber'];
+      this.hasEditedNumber_ = $('creditCardNumber').value.length == 0;
     },
   };
 
   AutoFillEditCreditCardOverlay.clearInputFields = function(title) {
     AutoFillEditCreditCardOverlay.getInstance().clearInputFields_();
   };
 
   AutoFillEditCreditCardOverlay.loadCreditCard = function(creditCard) {
     AutoFillEditCreditCardOverlay.getInstance().loadCreditCard_(creditCard);
   };
 
   AutoFillEditCreditCardOverlay.setTitle = function(title) {
     $('autoFillCreditCardTitle').textContent = title;
   };
 
   // Export
   return {
     AutoFillEditCreditCardOverlay: AutoFillEditCreditCardOverlay
   };
 
 });