js获取inpu焦点，输入完1位数字后自动跳到第二个input，类似支付宝密码输入完自动跳转

最新推荐文章于 2023-01-22 17:18:04 发布
最新推荐文章于 2023-01-22 17:18:04 发布
阅读量1.1k 收藏 4
点赞数 2
分类专栏： jquery php 文章标签： jquery js html js焦点事件 php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuhounuanyangzhao/article/details/85682946
版权
php 同时被 2 个专栏收录
32 篇文章 0 订阅
订阅专栏
jquery
17 篇文章 0 订阅
订阅专栏

类似于这样的

以下直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>蒙版遮罩</title>
    <link rel="stylesheet" type="text/css" href="main.css" >
</head>
<body >
<div class="tl-content">
    <iframe style="height: 100vh;width: 100%" frameborder="0" src="tl_iframe.html"></iframe>
    <div class="tl-shade">&nbsp;</div>
    <form></form>
    <div class="tl-pupout">
       <ul class="tl-pupout-ul" id="wrap">
           <li class="tl-pupout-li"><input type="text" name="key1"  style="text-align: center" placeholder="-"></li>
           <li class="tl-pupout-li"><input type="text" name="key1"  style="text-align: center" placeholder="-"></li>

           <li class="tl-pupout-li"><input type="text" name="key1"  style="text-align: center" placeholder="-"></li>

           <li class="tl-pupout-li"><input type="text" name="key2"  style="text-align: center" placeholder="-"></li>
       </ul>
        <div class="tl-pupout-text" id="tl-pupout-text">
             <p>1.文字描述1</p>
             <p>2.文字描述2</p>
        </div>
    </div>
</div>
<script>

    onload = function(){
        var txts = wrap.getElementsByTagName("input");
        for(var i = 0; i<txts.length;i++){
            var t = txts[i];
            t.index = i;
            t.setAttribute("readonly", true);
            t.onkeyup=function(){
                this.value=this.value.replace(/^(.).*$/,'$1');
                var next = this.index + 1;
                if(next > txts.length - 1){
                    alert('提交');
                    document.getElementById("tl-pupout-text").style.display="block";
                }
                txts[next].removeAttribute("readonly");
                txts[next].focus();
            }

        }
        txts[0].removeAttribute("readonly");
    }

</script>
</body>
</html>

css代码也直接贴给你们，不去整理了。因为我是做php的，不是专业前端。

/*taolei*/
html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select {
    margin: 0;
    padding: 0;
}
*{box-sizing: border-box;}
html, body {
    min-height: 100%;
}

body {
    font-family: "Microsoft YaHei";
    font-size:14px;
    color:#333;
}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
ul,ol {
    list-style: none;
}

img {
    border: none;
    vertical-align: middle;
}

a {
    text-decoration: none;
    color: #232323;
}

table {
    border-collapse: collapse;
    table-layout: fixed;
}

input, textarea {
    outline: none;
    border: none;
}

textarea {
    resize: none;
    overflow: auto;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: ".";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow:hidden;
}

.fl {
    float: left
}

.fr {
    float: right
}

.tl {
    text-align: left;
}

.tc {
    text-align: center
}

.tr {
    text-align: right;
}

.ellipse {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inline{
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
/*taolei*/

.tl-content{
    position: relative;
    height: 100vh;
    width: 100%;
    overflow-y: hidden;
}
.tl-shade{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(51, 51, 51, 0.3);
}
.tl-pupout{
    position: absolute;
    width: 800px;
    top: 20%;
    left: 50%;
    margin-left: -400px;
}
.tl-text-img{
    width: 100%;
    height: 100vh;
    background-position: center center;
}
.tl-pupout-ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.tl-pupout-li{
   width: 25%;
}
.tl-pupout-li input{
    border-radius: 5px;
    height:50px;
    margin: 10px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);
}

.tl-pupout-text{
    display: none;
    border-radius: 5px;
    margin: 20px;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (max-width: 800px) {
    .tl-pupout{
        width: 90%;
        top: 20%;
        left: 5%;
        margin-left:0;
    }
    .tl-pupout-box{
        margin: 10px;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.8);
        max-height: 100px;
        overflow-y: auto;
    }
    .tl-pupout-text{
        margin: 10px;
        padding: 10px;
    }
}

 

春干部
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面自动输入数字,js input框输入1位数字后自动跳到下一个input框聚焦
weixin_42501298的博客
06-10 1697
// input框输入1位数字后自动跳到下一个input聚焦function goNextInput(el){var txts = document.querySelectorAll(el);for(var i = 0; ivar t = txts[i];t.index = i;t.setAttribute("readonly", true);t.onkeyup=function(){this.v...
js仿支付宝填写支付密码效果实现多方框输入密码
11-22
不知道怎么描述标题，先看截图吧，大致的效果就是一个框输入一位密码。 最开始实现的思路是一个小方框就是一个type为password的input，每输入一位自动跳到下一位，删除一位就自动跳到前一位，android上是OK的，很平滑也没有bug，但是ios上会出现键盘频繁调起和关闭，非常影响用户体验。原因估计是每个input会不断的focus和blur，每次focus会调起键盘，blur又会关闭键盘，so….此方案肯定不行了。 PM非要实现这种效果，木有办法~拗不过，一句用户体验不好会让你没话说，谁要咱是前端呢~拗不过就找解决方案吧。 既然多个是频繁focus和blur导致的问题，又必须是密码框
小程序输入框完成自动切换到下个输入框
web全栈开发的博客
05-13 1282
先看图 <view class="w-80 h-100 rad-10 b-a-9 tc f-50" v-for="(item,index) in 6"> <input class="w-80 h-100 " maxlength="1" type="text" @input="inputListener(index)" :focus="focus && (focusIndex == index)"/> </view> data
js input框输入1位数字后自动跳到下一个input框聚焦
weixin_30855761的博客
07-23 1370
// input框输入1位数字后自动跳到下一个input聚焦 function goNextInput(el){ var txts = document.querySelectorAll(el); for(var i = 0; i<txts.length;i++){ var t = txts[i]; t.index = i; ...
js模拟支付宝输入密码
weixin_33871366的博客
04-11 296
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> input{ width:60px; height:60px; ...
【JavaScript源代码】element input输入框自动获取焦点的实现.docx
12-28
element input输入框自动获取焦点的实现 　最近项目中在做表单的时候，需要自动滚动到评论框，并且让评论框自动聚焦，这就需要手动触发输入框的 focus 状态。　但是，element并不支持autofocus属性，那就只能通过...
vue3 获取焦点，vu3 input 获取焦点 Vue 3 focus input
09-08
我们都知道在vue2中获取焦点为,然后调用focus方法 this.$nextTick(()=>{ this.$refs.XXX.focus() }) 现在我们的vue3怎么获取焦点，请看附件，已经正常使用。 请放心下载
input禁止键盘及中文输入,但可以点击
09-04
主要介绍了<input>禁止键盘及中文输入,但可以点击。需要的朋友可以过来参考下，希望对大家有所帮助
input自动补全
08-16
记得添加jquery.js ，不然使用不起 $("#v_szm").autoItem({ data:data,//数据源 cols:["id","text"],//匹配字段名称 id:"id", text:"text",//显示字段名称 width:150,//宽度 默认input宽度 rows:10,//显示...
JavaScript获取并更改input标签name属性的方法
12-09
本文实例讲述了JavaScript获取并更改input标签name属性的方法。分享给大家供大家参考。具体实现方法如下： <input name="kk"></input> [removed] // 这里用getElementsByTagName把所有的input对象取...
input校验数字且自动跳转下一个input框输入，监听backspace事件
西风XF的博客
07-17 7290
在前一个输入框写值的时候，若是数字，光标自动跳转到下一个输入框。若是非数字，则不输入值。（自动匹配数字，监听文本框的值是否为数字）；在删除后一个输入框的值的时候，光标自动跳转到前一个输入框。
input输入一个数字后 自动聚集下一个input
Web_Notes的博客
03-16 341
html <input class="people_input inp_number1" key="1" maxlength="1" placeholder="0" /> <input class="people_input inp_number2" key="2" maxlength="1" placeholder="0" /> .
多个input输入框 限制每个输入框输入一位 输入完成自动获取下一个input焦点
姜&腾腾的专栏
08-21 9260
多个input自动获取下一个input焦点 #wrap { margin: 50px auto; width: 300px; text-align: center; } #wrap div{ width: 206px; margin: 10px auto; } #w
当前页面跳转传值并自动填入，页面加载完毕后执行 js 弹框
Anonymous
06-20 2214
JS location.href = ('/container/container-binding/list?qc_code/' + qcode + '/weight/' + weight); $(function() { //location.href 返回页面的 url //console.log(location.href); //location.search ...
js页面跳转及自动向表格添加数据
renran6的博客
01-22 490
document.getElementById('comment').innerHTML = '请输入用户名';document.getElementById('comment').innerHTML = '请输入密码';document.getElementById('comment').innerHTML = '请输入用户名';document.getElementById('comment').innerHTML = '请输入密码';
js密码框数字输入自动跳转
ICode联盟
09-17 269
js密码框数字输入自动跳转，类似支付宝密码输入框效果。
js跳转页面并传值自动填充_如何限制或阻止Windows从填充跳转列表
09-17 321
js跳转页面并传值自动填充By default Windows keeps track of which files you have opened with a particular program in its Jump List. Here’s how to limit the amount of entries it stores or even disable it altogether...
el-inpu 限制输入90到-90
最新发布
06-08
您可以使用element UI中的el-input组件和自定义验证规则来限制输入的范围。下面是一个例子： ```html <el-input v-model="inputValue" :rules="rules"></el-input> ``` ```javascript data() { return { input...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值