关于H5单字符输入框组的介绍

来源：互联网发布：javaweb考勤系统源码编辑：程序博客网时间：2024/06/08 16:20

今天介绍一下单字符输入框组的实现就像上图那样，有点和支付宝或者微信的密码输入框类似，目前我能想到的就有两种办法，多的不说，直接上代码：

方法一：通过按键获取事件

<!DOCTYPE html>

<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="initial-scale=1, maximum-scale=1">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black"><title>Bootstrap </title><script type="text/javascript">(function(){var phoneWidth=parseInt(window.screen.width),phoneScale=phoneWidth/640,ua=navigator.userAgent;if(/Android (\d+\.\d+)/.test(ua)){var version=parseFloat(RegExp.$1);if(version>2.3){document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+", maximum-scale = "+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">')}}else{document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">')};})();</script>    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><style type="text/css">html,body{margin: 0;padding: 0;width: 100%;height: 100%;}/*html{background-color: #ccc;}*/body{width: 640px;margin: 0 auto;box-sizing: border-box;}input{width: 90px;height: 100px;float: left;text-align: center;border-color:rgb(218,218,218);margin-left: O auto;border-style:solid; border-width: 1px;font-size: 50px;color: red;}</style><script type="text/javascript">$(document).ready(function(){$("input").keyup(function(e){//console.log(1);if(e.which == 8){$(this).prev().focus();}else{$(this).next().focus();}})});</script></head><body><div style="padding:500px 0;width: 100%;"><div style="width: 400px;margin: auto;"><input id="input1" type="text" style="border-radius:20px 0 0 20px;" maxlength="1"  /><input id="input2" type="text" style="" maxlength="1"/><input id="input3" type="text" style="" maxlength="1"/><input id="input4" type="text" style="border-radius:0 20px 20px 0;" maxlength="1" /></div></div></body></html>

方法二：通过输入来获取事件

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="initial-scale=1, maximum-scale=1">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black"><title>Bootstrap </title><script type="text/javascript">(function(){var phoneWidth=parseInt(window.screen.width),phoneScale=phoneWidth/640,ua=navigator.userAgent;if(/Android (\d+\.\d+)/.test(ua)){var version=parseFloat(RegExp.$1);if(version>2.3){document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+", maximum-scale = "+phoneScale+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">')}}else{document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">')};})();</script>    <!--<script src="js/jquery-1.10.2.min.js"></script>-->    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><style type="text/css">html,body{margin: 0;padding: 0;width: 100%;height: 100%;}/*html{background-color: #ccc;}*/body{width: 640px;margin: 0 auto;box-sizing: border-box;}input{width: 90px;height: 100px;float: left;text-align: center;border-color:rgb(218,218,218);margin-left: O auto;border-style:solid; border-width: 1px;font-size: 50px;color: red;}</style><script type="text/javascript">function fun(temp){console.log(temp);var valstr=$("#input"+temp).val();if(valstr.length==1 && " "!=valstr){$("#input"+(temp+1)).focus();$("#input"+(temp+1)).val(" ");return ;}if(valstr.length==2){var val=valstr.substr(0,1);if(" "==val){$("#input"+temp).val(valstr.substr(1,1));$("#input"+(temp+1)).focus();return ;}else{$("#input"+temp).val(valstr.substr(0,1));$("#input"+(temp+1)).focus();$("#input"+(temp+1)).val(valstr.substr(1,1));return ;}}if(''==valstr){$("#input"+(temp-1)).focus();return ;}}</script></head><body><div style="padding:500px 0;width: 100%;"><div style="width: 400px;margin: auto;"><input id="input1" type="text" style="border-radius:20px 0 0 20px;" oninput="fun(1)" maxlength="2"  /><input id="input2" type="text" style="" oninput="fun(2)" maxlength="2"/><input id="input3" type="text" style="" oninput="fun(3)" maxlength="2"/><input id="input4" type="text" style="border-radius:0 20px 20px 0;" oninput="fun(4)" maxlength="2" /></div></div></body></html>

以上就是两种方法的实现代码，我主要写的是移动端浏览器部分，PC端也适用

最后，大家要是觉得好，请点赞，有问题请留言1101758018@qq.com

阅读全文

0 0