Ticket #32886: 32886.3.diff

src/wp-admin/js/user-profile.js

@@ -22 +22 @@
                         } else {
                                 pw_field.val( pw_field.data( 'pw' ) );
                                 pw_field.trigger( 'propertychange' );
-                                pw_field.attr( 'type', 'text' ).focus();
-                                pw_field[0].setSelectionRange(100, 100);
+                                pw_field = toggleField( pw_field, 1 );
+                                pw_field.focus();
+                                if ( 'undefined' !== typeof pw_field[0].setSelectionRange ){
+                                        pw_field[0].setSelectionRange(100, 100);
+                                }
                         }
                 };
 
@@ -38 +41 @@
 
                 parentform.on('submit', function(){
                         pw_field2.val( pw_field.val() );
-                        pw_field.attr('type', 'password');
+                        pw_field = toggleField( pw_field, 0 );
                 });
 
 
-                pw_field.on('input propertychange', function(){
+                parentform.on('input keyup propertychange', '#pass1', function(){
                         setTimeout( function(){
                                 var cssClass = pw_strength.attr('class');
                                 pw_field.removeClass( 'short bad good strong' );
@@ -79 +82 @@
                  * This fixes the issue by copying any changes from the hidden
                  * pass2 field to the pass1 field.
                  */
-                pw_field2.on( 'input propertychange', function() {
+                pw_field2.on( 'input keyup propertychange', function() {
                         pw_field.val( pw_field2.val() );
                         pw_field.trigger( 'propertychange' );
                 } );
@@ -93 +96 @@
                 pw_togglebtn.on( 'click', function() {
                         var show = pw_togglebtn.attr( 'data-toggle' );
                         if ( show == 1 ) {
-                                pw_field.attr( 'type', 'text' );
+                                pw_field = toggleField( pw_field, 1 );
                                 pw_togglebtn.attr( 'data-toggle', 0 )
                                         .find( '.text' )
                                                 .text( 'hide' )
                                 ;
                         } else {
-                                pw_field.attr( 'type', 'password' );
+                                pw_field = toggleField( pw_field, 0 );
                                 pw_togglebtn.attr( 'data-toggle', 1 )
                                         .find( '.text' )
                                                 .text( 'show' )
                                 ;
                         }
                         pw_field.focus();
-                        pw_field[0].setSelectionRange(100, 100);
+                        if ( 'undefined' !== typeof pw_field[0].setSelectionRange ){
+                                pw_field[0].setSelectionRange(100, 100);
+                        }
                 });
+
         });
 
+        function toggleField( pw_field, show ) {
+                var newField = document.createElement( 'input' );
+                var type = 'password';
+                var $newField;
+
+                if ( 1 == show ) {
+                        type = 'text';
+                }
+
+                newField.type = type;
+                $newField = $( newField );
+
+                $newField
+                .attr({
+                        'id'   : 'pass1',
+                        'name' : 'pass1',
+                        'autocomplete' : 'off'
+                })
+                .addClass( pw_field[0].className )
+                .data( 'pw', pw_field.data( 'pw' ) );
+                $newField.val( pw_field.val() );
+
+                pw_field.replaceWith( $newField );
+                return $newField;
+        }
+
         function check_pass_strength() {
                 var pass1 = $('#pass1').val(), pass2 = $('#pass2').val(), strength;
 
@@ -141 +173 @@
 
         $(document).ready( function() {
                 var $colorpicker, $stylesheet, user_id, current_user_id,
-                        select = $( '#display_name' );
+                        select = $( '#display_name' ),
+                        pw_form = $('#pass1').closest('form');
 
-                $('#pass1').val('').on( 'input propertychange', check_pass_strength );
-                $('#pass2').val('').on( 'input propertychange', check_pass_strength );
+                $('#pass1').val('');
+                $('#pass2').val('');
+                pw_form.on( 'input  keyup propertychange', '#pass1, #pass2', check_pass_strength );
                 $('#pass-strength-result').show();
                 $('.color-palette').click( function() {
                         $(this).siblings('input[name="admin_color"]').prop('checked', true);