How to Add a Visibility Button to the Password Field

[alfian444]

How to Add a Visibility Button to the Password Field

[eduo]

Depending on the browser, you might get the widget to make the password visible automatically.

I just tried this schema and I got this in ·Edge:

Alternatively, you can set a watcher for password fields where if length > 0 an icon is added to the input, and to that icon add an event listener for click to switch icons and to change the type from password to text and viceversa.

Alternatively, you could scan all your password fields and append a toggable eye when there isn't one already.

You can put this in your change event for the editor:

editor.on('change', function() { 
document.querySelectorAll("[type=password]").forEach((thisField,eid) => {
	if(!thisField.parentElement.querySelectorAll('i.eyetoggle').length>0) {
		thisIcon=document.createElement('i');
		thisIcon.addEventListener('click',function(){ 
			if(thisField.type === "password") {
				thisField.type = "text";
				this.classList.add("fa-eye-slash");
				this.classList.remove("fa-eye");
			} else {
				thisField.type = "password";
				this.classList.add("fa-eye");
				this.classList.remove("fa-eye-slash");
			}});
			thisField.style.display='inline-block';
			thisField.style.width='90%'
			thisIcon.style.zIndex=2
			thisIcon.classList.add('eyetoggle');
			thisIcon.classList.add('fa');
			thisIcon.classList.add('fa-eye');
			thisField.parentElement.append(thisIcon)
		}
	}
)
}

(of course, you should modify the style to work for you, and perhaps put a timer in the click event so it automatically turns back to password field).

Edit: Some formatting, since I wrote this in a rush in the developer tools console :D
Edit2: Modified input field to be inline block and 90% width to accomodate the icon after it, but you can do your own styling.

[alfian444]

Depending on the browser, you might get the widget to make the password visible automatically.

I just tried this schema and I got this in ·Edge:

Alternatively, you can set a watcher for password fields where if length > 0 an icon is added to the input, and to that icon add an event listener for click to switch icons and to change the type from password to text and viceversa.

Alternatively, you could scan all your password fields and append a toggable eye when there isn't one already.

You can put this in your change event for the editor:

editor.on('change', function() { 
document.querySelectorAll("[type=password]").forEach((thisField,eid) => {
	if(!thisField.parentElement.querySelectorAll('i.eyetoggle').length>0) {
		thisIcon=document.createElement('i');
		thisIcon.addEventListener('click',function(){ 
			if(thisField.type === "password") {
				thisField.type = "text";
				this.classList.add("fa-eye-slash");
				this.classList.remove("fa-eye");
			} else {
				thisField.type = "password";
				this.classList.add("fa-eye");
				this.classList.remove("fa-eye-slash");
			}});
			thisField.style.display='inline-block';
			thisField.style.width='90%'
			thisIcon.style.zIndex=2
			thisIcon.classList.add('eyetoggle');
			thisIcon.classList.add('fa');
			thisIcon.classList.add('fa-eye');
			thisField.parentElement.append(thisIcon)
		}
	}
)
}

(of course, you should modify the style to work for you, and perhaps put a timer in the click event so it automatically turns back to password field).

Edit: Some formatting, since I wrote this in a rush in the developer tools console :D Edit2: Modified input field to be inline block and 90% width to accomodate the icon after it, but you can do your own styling.

Thank you for the answer, this really helped me :D