页面的head部分，先远程调用一个图标字体库，然后jQuery库，代码如下：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>

接着设置好页面元素的样式，代码如下：

页面的body部分，设置好页面元素的容器，实际上用了两个input作为密码输入框，分别对应两个不同的图标按钮，代码如下：

<div class="input-wrapper">
	<input id="input-pw" class="active-pw" type="password" placeholder="密码自动隐藏">
	<input id="input-text" class="passive-text" type="text"  placeholder="密码显示状态">
	<span class="input-trigger">
		<i class="material-icons icon-1">remove_red_eye</i>
		<i class="material-icons icon-2">more_horiz</i>
	</span>
</div>

页面的底部，设置好输入或点击的事件响应，注意一下，这里用了ES6的语法，代码如下：

$(() => {
	$('#input-text').on('keyup', () => {
		let tempVal = $('#input-text').val();
		$('#input-pw').val(tempVal);
	});
	$('#input-pw').on('keyup', () => {
		let tempVal = $('#input-pw').val();
		$('#input-text').val(tempVal);
	});	
	//翻转显示和隐藏密码
	$('.input-trigger').on('click', () => {
		$('#input-text').toggleClass('active-text passive-text');
		$('#input-pw').toggleClass('passive-pw active-pw');
		if ($('.icon-1').css('display') == 'inline-block' && $('.icon-2').css('display') == 'none'){
			$('.icon-1').toggle().css({'display':'none'});
			$('.icon-2').toggle().css({'display':'inline-block'});
		}else if ($('.icon-1').css('display') == 'none' && $('.icon-2').css('display') == 'inline-block'){
			$('.icon-1').toggle().css({'display':'inline-block'});
			$('.icon-2').toggle().css({'display':'none'});
		}
	});
});