时间:2021-05-26
本文实例为大家分享了JavaScript实现PC端四格密码输入框的具体代码,供大家参考,具体内容如下
html代码如下
比较简洁的一个demo
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>四个密码输入框</title> <script type="text/javascript" src="jquery.min.js" ></script> </head> <style type="text/css"> input{ width:40px; height:40px; text-align: center; font-size:22px; } </style> <body> 支付密码 <input type="password" name="pwd1" maxlength="1"/> <input type="password" name="pwd2" maxlength="1"/> <input type="password" name="pwd3" maxlength="1"/> <input type="password" name="pwd4" maxlength="1"/> </body> <script> //必须引入jquery才可以用 //1:当输入框1输入1个字符后,自动切换光标到输入框2 $(document).ready(function(){ $("[name='pwd1']").bind("input",function(){ if($(this).val().length==1){ $("[name='pwd2']").focus(); } }) $("[name='pwd2']").bind("input",function(){ if($(this).val().length==1){ $("[name='pwd3']").focus(); }else if($(this).val().length==0){ $("[name='pwd1']").focus(); } }) $("[name='pwd3']").bind("input",function(){ if($(this).val().length==1){ $("[name='pwd4']").focus(); }else if($(this).val().length==0){ $("[name='pwd2']").focus(); } }) $("[name='pwd4']").bind("input",function(){ if($(this).val().length==0){ $("[name='pwd3']").focus(); } }) }) </script></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
需要实现的效果:一个输入框,当输入框未获得焦点的时候,value值为“密码”;当输入框失去焦点的时候,输入内容显示为”*****”我们很直接会想到下面的js$(
输入框和消息显示框是常用的GUI界面部件,其中输入框的重要任务就是返回一个输入的字符串,而消息显示框则要显示指定的信息。功能:输入一个密码,如果密码正确则显示c
天猫商城/淘宝网店输入框中表明的关键字官方网只有设定移动端;PC端输入框沒有官方网专用工具设定。移动端设定通道:【淘宝卖家中心】-【店面装修】-【移动端】寻找要
先看下基于JS代码实现input密码输入框输入密码变黑点密文。具体代码如下所示:html代码输入密码Submitjs代码functioncheckForm(){
本文实例为大家分享了小程序实现密码输入框的具体代码,供大家参考,具体内容如下小程序密码输入框wxml请设置支付密码并妥善保管下一步wxss/*pages/mim