显示密码功能最终会员专业表格

Question

如何在我的表格中添加显示密码字段？ 我在功能中尝试此代码，但没有工作 ADD_FILTER（“ um_confirm_user_password_form_edit_field”，“ um_user_password_ford_edit_field”，10，2）; add_filter（“ um_user_password_form_edit_field”，“ um_user_password_form_edit_field”，10，2）; 函数um_user_password_form_edit_field（$ output，$ set_mode）{

ob_start();
 ?>
<div id='um-field-show-passwords-<?php echo $set_mode;?>' style='text-align:right;display:block;'>
    <i class='um-faicon-eye-slash'></i>
    <a href='#'><?php _e("Show password","ultimate-member"); ?></a>
</div>
<script type='text/javascript'>
    jQuery('div[id="um-field-show-passwords-<?php echo $set_mode;?>"] a').click(function(){ 
     
        var $parent = jQuery(this).parent("div"); 
        var $form = jQuery(".um-<?php echo $set_mode;?> .um-form");

        $parent.find("i").toggleClass(function() {
            if ( jQuery( this ).hasClass( "um-faicon-eye-slash" ) ) {
                $parent.find("a").text('<?php _e("Hide password","ultimate-member"); ?>');
                jQuery( this ).removeClass( "um-faicon-eye-slash" )
                $form.find(".um-field-password").find("input[type=password]").attr("type","text");
               return "um-faicon-eye";
            }
             
            jQuery( this ).removeClass( "um-faicon-eye" );
            $parent.find("a").text('<?php _e("Show password","ultimate-member"); ?>');
            $form.find(".um-field-password").find("input[type=text]").attr("type","password");
          
            return "um-faicon-eye-slash";
        });

        return false; 

    });
</script>
<?php 
return $output.ob_get_clean();

}

Answer 1

<?php
add_filter( "um_confirm_user_password_form_edit_field", "um_user_password_form_edit_field", 10, 2 );
add_filter( "um_user_password_form_edit_field", "um_user_password_form_edit_field", 10, 2 );

function um_user_password_form_edit_field( $output, $set_mode ) {
    ob_start();
    ?>
    <div id='um-field-show-passwords-<?php echo $set_mode; ?>' style='text-align:right;display:block;'>
        <i class='um-faicon-eye-slash'></i>
        <a href='#'><?php _e( "Show password", "ultimate-member" ); ?></a>
    </div>
    <script type='text/javascript'>
        jQuery( document ).ready( function( $ ) {
            $( 'body' ).on( 'click', 'div#um-field-show-passwords-<?php echo $set_mode; ?> a', function() {
                var $parent = $( this ).parent( 'div' );
                var $form = $( '.um-<?php echo $set_mode; ?> .um-form' );

                $parent.find( 'i' ).toggleClass( function() {
                    if ( $( this ).hasClass( 'um-faicon-eye-slash' ) ) {
                        $parent.find( 'a' ).text( '<?php _e( "Hide password", "ultimate-member" ); ?>' );
                        $( this ).removeClass( 'um-faicon-eye-slash' )
                        $form.find( '.um-field-password' ).find( 'input[type=password]' ).attr( 'type', 'text' );
                        return 'um-faicon-eye';
                    }
                    $( this ).removeClass( 'um-faicon-eye' );
                    $parent.find( 'a' ).text( '<?php _e( "Show password", "ultimate-member" ); ?>' );
                    $form.find( '.um-field-password' ).find( 'input[type=text]' ).attr( 'type', 'password' );
                    return 'um-faicon-eye-slash';
                } );

                return false;
            } );
        } );
    </script>
    <?php
    return $output . ob_get_clean();
}

该代码旨在以WordPress中最终成员插件生成的形式为密码字段添加“显示密码”功能。这是代码所做的内容的分解：

两个过滤器钩子“ um_confirm_user_password_edit_field_field”和“ um_user_password_edit_field_field”，并用“ um_user_pass_password_edit_edit_field_field”功能定义并挂钩。假定这些过滤器钩被正确定义和钩在WordPress主题或插件中。

在“ um_user_password_form_edit_field”功能中，输出缓冲以OB_START（）启动，以捕获生成的HTML。

创建了具有“ UM-Field-Show-Passwords” ID的元素，其中包含带有文本“显示密码”的图标和锚固链接。

包括一个JavaScript块来处理“显示密码”锚链接上的单击事件。它使用jQuery根据过滤器钩提供的$ set_mode参数来定位适当的DOM元素。

单击“显示密码”链接时，JavaScript代码通过将其类型属性从“密码”更改为“文本”，反之亦然。它还在显示密码时将锚链接的文本更新为“隐藏密码”，并在隐藏密码时“显示密码”。

然后，捕获的HTML输出和JavaScript代码将通过$输出参数和ob_get_clean（）函数返回表单中的适当位置。