Cómo añadir un botón en un campo de texto para mostrar u ocultar una contraseña en Oracle APEX

Siempre que tengamos campos de texto de tipo password en nuestros formularios de Oracle APEX, es recomendable añadir un botón que le permita a los usuarios mostrar el texto que coloquen, así se pueden asegurar que lo que ingresan esta bien escrito.

Para lograr esta solución debemos hacer lo siguiente:

Crear un campo de texto de tipo password:

Buscaremos la sección Post text y añadiremos el siguiente código:

<button class="t-Button t-Button--icon t-Button--iconLeft" type="button" onclick="mostrarContrasena()">
<span id="ojo" class="t-Icon t-Icon--left fa fa-eye" style="font-size: 14px; margin-top: 0.5px;" aria-hidden="true">
    Mostrar
</span>
</button>

De esta forma crearemos el botón de mostrar/ocultar al final del campo de texto, si quisiéramos colocarlo al principio, se puede añadir en Pre text en lugar de Post text.

Por último, crearemos la funciona mostrarConstrasena() como una función global en la página, esta es la función que llama el botón y añadiremos el siguiente código:

Nota: El id P14_CONTRASENA es el id del campo de texto donde se coloca la contraseña

function mostrarContrasena(){
      var tipo = document.getElementById("P14_CONTRASENA");
      var ojo = document.getElementById("ojo");
      if(tipo.type == "password"){
          tipo.type = "text";
          ojo.innerHTML = " Ocultar";
          ojo.classList.remove("fa-eye");
          ojo.classList.add("fa-eye-slash");
      }else{
          tipo.type = "password";
          ojo.innerText = " Mostrar";
          ojo.classList.add("fa-eye");
          ojo.classList.remove("fa-eye-slash");
      }
  }

Guardamos los cambios y probamos su funcionamiento, al cargar la pantalla se verá el campo así:

Cuando se presione el botón Mostrar, el campo de tipo password cambiará a un campo de texto normal y el botón cambiará su texto por Ocultar con un icono distinto: