jquery实现带方框填空输入框效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery实现带方框填空输入框效果代码,类似于验证码数字输入框。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style type="text/css"> body { padding: 20px; } * { margin: 0; padding: 0; list-style: none; border: 0; box-sizing: border-box; } .answer_input { margin: 20px auto; border-bottom: 1px dotted gray; overflow: hidden; clear: both; } .answer_input span { margin: 0 2px; padding: 0; display: inline-block; text-align: center; vertical-align: middle; background: #ffffff; border: 2px solid #cccccc; border-radius: 4px; font-size: 16px; color: #da2d20; width: 30px; height: 30px; line-height: 26px; } .answer_input span:active { background-color: #f1f1f1; } .answer_input span.span_focus { border-color: #da2d20; } .h_input { width: 1px; height: 0px; } .ibutton { margin: 0 auto; width: 100%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; line-height: 25px; -moz-transition: all 0.2s ease-out 0s; -webkit-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; padding: 12px 36px; font-size: 18px; font-weight: bold; } .btn-blue { color: #ffffff; background-color: #428bca; border-color: #357ebd; } </style> <script type="text/javascript"> $().ready(function () { var uid, span_val, span_maxlength; $(".answer_input").click(function () { uid = $(this).attr("v"); span_val = $("#Q_" + uid).val(); span_maxlength = $("#u_" + uid + " span").length; $("#h_input").attr("maxlength", span_maxlength); $("#h_input").val("").focus().val(span_val); GetSpanFocus(); }); $(".h_input").on("input propertychange", function () { span_val = $("#h_input").val(); $("#u_" + uid + " span").text(""); var arr = span_val.split(""); $.each(arr, function (i, value) { $("#u_" .........完整代码请登录后点击上方下载按钮下载查看
网友评论0