• 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: Add an eye-icon to the password field

Add an eye-icon to the password field 5 years 2 months ago #39841

  • dlm
  • dlm's Avatar
  • OFFLINE
  • Senior Boarder
  • Posts: 71
Hi there,

Can someone explain how to add an eye-icon to the password field so that the user can see the password he has typed in this field.

Many thanks!
The administrator has disabled public write access.

Add an eye-icon to the password field 5 years 2 months ago #39859

  • adrianp
  • adrianp's Avatar
  • OFFLINE
  • RSJoomla! Official Staff
  • Posts: 631
  • Thank you received: 146
Hello,

You can try similar steps:

- include your icon either by directly modifying the auto-generated form layout, or through a PHP script ("Scripts Called On Form Display" area; where you can directly adjust the $formLayout variable).

If you modify the auto-generated form layout, which should be done after you're finished setting up your form so that existing fields are automatically added to your layout, while editing the form > Properties > Form Layout > disable the "Auto Generate Layout" option so that you can perform modifications. Here, you should find your password field body type placeholder; for example assuming the field is called myPasswordField, you can place your icon next to the following placeholder:

{myPasswordField:body}

- include an onclick trigger on your image that calls a function:
onclick="showPass();"

- add the JavaScript function (your form > Properties > CSS and JavaScript > JavaScript), including the <script> tags:
<script type="text/javascript">
function showPass(){
	fieldName = "myPasswordField";
	fieldType = document.getElementById(fieldName).getAttribute("type");
	if(fieldType == "password"){
		document.getElementById(fieldName).setAttribute("type","text");
	}else{
		document.getElementById(fieldName).setAttribute("type","password");
	}
}
</script>

- from the JavaScript replace myPasswordField with the exact name you've given to your password field (case sensitive).
This is not official customer support. To receive your support, submit a support ticket here.
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!