如何在Django admin的password_change_form.html密码区添加显示隐藏眼睛图标

1. 优先选用模板覆盖方案 #

首先确认模板存放路径：在项目templates目录下创建admin子目录，新建文件password_change_form.html，该路径优先级高于Django Admin自带模板，不会影响普通用户端的密码修改页面。
不需要修改PasswordChangeView类，仅通过模板扩展即可完成需求，适配你已调整的Bootstrap样式。

2. 轻量实现方案（无需修改原有表单结构） #

适合不想重构现有表单代码的场景，通过JS注入的方式添加切换按钮，完全兼容现有样式：

{% extends "admin/password_change_form.html" %}

{% block content %}
{{ block.super }}
<style>
/* 适配你的Bootstrap样式，可按需调整 */
.password-input-wrap {
  position: relative;
}
.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 10;
  padding: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // 匹配密码修改页的三个输入框：旧密码、新密码、确认密码
  const pwdFields = document.querySelectorAll('#id_old_password, #id_new_password1, #id_new_password2');
  
  pwdFields.forEach(field => {
    // 给输入框套一层容器
    const wrap = document.createElement('div');
    wrap.className = 'password-input-wrap';
    field.parentNode.insertBefore(wrap, field);
    wrap.appendChild(field);
    
    // 添加切换按钮，可替换为Bootstrap图标标签
    const toggleBtn = document.createElement('button');
    toggleBtn.className = 'password-toggle';
    toggleBtn.type = 'button';
    toggleBtn.innerHTML = '👁️';
    wrap.appendChild(toggleBtn);
    
    // 绑定切换逻辑
    toggleBtn.addEventListener('click', () => {
      field.type = field.type === 'password' ? 'text' : 'password';
      toggleBtn.innerHTML = field.type === 'password' ? '👁️' : '🙈';
    });
  });
});
</script>
{% endblock %}

3. 完全自定义表单结构方案 #

如果需要彻底重构表单的Bootstrap样式，直接替换原有表单渲染逻辑即可：

{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" href="{% static "admin/css/forms.css" %}">{% endblock %}
{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
&rsaquo; {% translate 'Password change' %}
</div>
{% endblock %}

{% block content %}
<div id="content-main">
  <form method="post">{% csrf_token %}
    {% if form.errors %}
      <p class="errornote">
      {% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
      </p>
    {% endif %}

    <p>{% translate 'Please enter your old password, for security’s sake, and then enter your new password twice so we can verify you typed it in correctly.' %}</p>

    <!-- 旧密码输入框 -->
    <div class="mb-3">
      <label for="{{ form.old_password.id_for_label }}" class="form-label">{{ form.old_password.label }}</label>
      <div class="input-group">
        {{ form.old_password }}
        <button class="btn btn-outline-secondary password-toggle" type="button" data-target="{{ form.old_password.id_for_label }}">👁️</button>
      </div>
      {{ form.old_password.errors }}
    </div>

    <!-- 新密码输入框 -->
    <div class="mb-3">
      <label for="{{ form.new_password1.id_for_label }}" class="form-label">{{ form.new_password1.label }}</label>
      <div class="input-group">
        {{ form.new_password1 }}
        <button class="btn btn-outline-secondary password-toggle" type="button" data-target="{{ form.new_password1.id_for_label }}">👁️</button>
      </div>
      {{ form.new_password1.errors }}
      {% if form.new_password1.help_text %}
      <div class="form-text">{{ form.new_password1.help_text|safe }}</div>
      {% endif %}
    </div>

    <!-- 确认密码输入框 -->
    <div class="mb-3">
      <label for="{{ form.new_password2.id_for_label }}" class="form-label">{{ form.new_password2.label }}</label>
      <div class="input-group">
        {{ form.new_password2 }}
        <button class="btn btn-outline-secondary password-toggle" type="button" data-target="{{ form.new_password2.id_for_label }}">👁️</button>
      </div>
      {{ form.new_password2.errors }}
    </div>

    <div class="submit-row">
      <input type="submit" value="{% translate 'Change my password' %}" class="btn btn-primary">
    </div>
  </form>
</div>
<script>
// 切换逻辑
document.querySelectorAll('.password-toggle').forEach(btn => {
  btn.addEventListener('click', function() {
    const targetField = document.getElementById(this.dataset.target);
    targetField.type = targetField.type === 'password' ? 'text' : 'password';
    this.textContent = targetField.type === 'password' ? '👁️' : '🙈';
  });
});
</script>
{% endblock %}

可根据你的项目实际Bootstrap类名替换代码中的form-label、input-group、mb-3等类名，若使用Bootstrap图标库，直接把emoji替换为对应图标标签即可。

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris