javascript 实现文本框明文转暗码

最新推荐文章于 2020-08-29 18:07:33 发布

东语~

最新推荐文章于 2020-08-29 18:07:33 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 开发文章标签： javascript 暗码明文

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/psp0001060/article/details/49536475

版权

JavaScript 开发专栏收录该内容

24 篇文章

订阅专栏

本文是介绍通过javascript 实现文本框内容以明文形式转暗码（如：转成*号）。

效果图：

鼠标移开后：

代码：

<html>
<head>
	<style>
		.body_input_data {
			font-family         :"ＭＳゴシック";
			font-size           :10pt;
			text-align          :left;
			vertical-align      :center;
			width               :40px;
			maxlength           :4;
			background-color    :#FFFFFF;
		}
		.number_data {
		font-family         :"ＭＳゴシック";
		font-size           :10pt;
		text-align          :left;
		vertical-align      :center;
		width               :40px;
		maxlength           :4;
		background-color    :#CCCCCC;
	}
	</style>
    <script type="text/javascript">
			function password_to_text(number_box,num) {
			for(var i=1;i<4;i++){
				document.getElementById(number_box+i).style.display = 'inline-block';
				document.getElementById(number_box+i).className = "body_input_data"; // ホワイト
				document.getElementById("password_"+number_box+i).style.display = 'none';
			}

			document.getElementById(number_box+num).focus();
		}

		function text_to_password(number_box) {

			var chg_flg = 0;
			for(var j=1;j<4;j++){
				if (document.getElementById(number_box+j).value.length == 4){
					chg_flg = chg_flg + 1;
				}
			}

			var word   = document.activeElement.id;
			var target = number_box;
			var str = " " + word;

			if (str.indexOf(" " + target) == -1 && chg_flg == 3) {
				for(var i=1;i<4;i++){
					document.getElementById("password_"+number_box+i).disabled = ""; // 入力可

					document.getElementById("password_"+number_box+i).style.display = 'inline-block';
					document.getElementById("password_"+number_box+i).className = "body_input_data"; // ホワイト
					document.getElementById(number_box+i).style.display = 'none';
				}
			}
		}
	</script>
	<title>
		密码明文转暗码
	</title>
</head>



<body>

        <table width="800" border="1" cellspacing="1" cellpadding="10" align="center">
			<tr>
				<td>
							输入完整的12位密码后，鼠标移开，输入的内容自动变成*，鼠标再次进入后，重新显示数字。
				</td>
			</tr>
            <tr>
				<td>				
                            <input type="text" name="bango1" maxlength="4" size="4" value="" οnblur="text_to_password('honnin_number_')" id="honnin_number_1" style="ime-mode : disabled;" class="body_input_data">
                            <input type="text" name="bango2" maxlength="4" size="4" value="" οnblur="text_to_password('honnin_number_')" id="honnin_number_2" style="ime-mode : disabled;" class="body_input_data">
                            <input type="text" name="bango3" maxlength="4" size="4" value="" οnblur="text_to_password('honnin_number_')" id="honnin_number_3" style="ime-mode : disabled;" class="body_input_data">
                            <input type="text" id="password_honnin_number_1" class="number_data" name="dammy1" value="****" style="display:none" οnfοcus="password_to_text('honnin_number_','1')" disabled/>
                            <input type="text" id="password_honnin_number_2" class="number_data" name="dammy2" value="****" style="display:none" οnfοcus="password_to_text('honnin_number_','2')" disabled/>
                            <input type="text" id="password_honnin_number_3" class="number_data" name="dammy3" value="****" style="display:none" οnfοcus="password_to_text('honnin_number_','3')" disabled/>
							<button type="reset" value="Reset">Reset</button>
				</td>
			</tr>
		</table>
</body>
</html>