前端页面input输入完成后切换input源码

最新推荐文章于 2021-05-30 19:21:04 发布
最新推荐文章于 2021-05-30 19:21:04 发布
阅读量155 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/heisenberg_zhe/p/6694384.html
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html的input输完一个直接跳到下一个</title>
    <style>
        .input input {
            display: inline-block;}

        .input{width: 580px;height:41px;line-height:41px;margin-right:20px;}
        .input input {
            border:1px solid #ccc;
            width: 100px;
            height: 40px;
            outline:none;
            font-size: 14px;
            font-weight: inherit;
            text-align: center;
            line-height: 40px;
            color: #000;
            background:#fff;
            margin-right:10px;
            margin-left:10px;
            font-family: "microsoft yahei";
        }
        .input:first-child {
            margin-left:0;
        }
    </style>
</head>

<body>
<div class="input" id="coupon">
    <input type="tel" placeholder="红" name="sn1" maxlength="5" id="sn1"> - <!-
    -><input type="tel" placeholder="包" name="sn2" maxlength="5" id="sn2"> - <!-
    -><input type="tel" placeholder="密" name="sn3" maxlength="5" id="sn3"> - <!-
    -><input type="tel" placeholder="钥" name="sn4" maxlength="5" id="sn4">
</div>

</body>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("#sn1").focus();
        //自动跳到下一个输入框
        $("input[name^='sn']").each(function() {
            var that = $(this);
            that.keypress(function(e) {
                var target = e.target;
                var charCode = e.charCode;
                if(!/\d/.test(String.fromCharCode(charCode))){
                  e.preventDefault()
                }
            })
            that.keyup(function() {
                if(that.val().length === 5){
                  var str = that.val();
                  var patt = /\d+/g;
                  var result = str.match(patt);
                  var value = result?result.join(''):'';
                  if (value.length < 5) {
                      that.val(value);
                  } else if(that.next()) {
                      that.next().focus();
                  }
                }

            })
        });
    });
</script>
</html>

转载于:https://www.cnblogs.com/heisenberg_zhe/p/6694384.html

aoya1979
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html页面自动输入数字,js input框输入1位数字后自动跳到下一个input框聚焦
weixin_42501298的博客
06-10 1724
// 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...
286_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
最新发布
08-04
还有`<form>`元素的改进，如`<input type="date">`等，提高了表单的可用性和数据输入的准确性。 这套源码的响应式设计是基于媒体查询（Media Queries）实现的，这是CSS3的一项功能，允许开发者根据设备特性（如屏幕...
input输入框输满3个字符自动跳到下一个input输入框
博客
03-02 1万+
html代码：<div id="demo"> <form action=""> <input type="text" maxlength="3"> <input type="text" maxlength="3"> <input type="text" maxlength="3"> <in
input text输完自动跳到下一个
weixin_34226182的博客
02-25 1695
应用场景： 短信验证码输入 效果： input输入框，输入完以后自动跳转到下一个 思路： 四个输入框 进入聚焦到第一个输入框 第一个输入框输完一个字符后自动聚焦到下一个输入框 1.四个输入框 <input type="text" name="sn1" id="sn1"/> <input type="text" name="sn2" id="sn2"/&gt...
js如何自动切换到下一个输入框
阿小绿的博客
06-28 1968
先上效果图 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>如何自动切换到下一个输入框</title> <style> input { width:
js 光标从一个框输入完之后自动跳到另一个框
我的博客
07-26 7745
思路就是获取第一个input框，然后keyup方法，然后触发事件，然后移动到后面那个inout框。
H671_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
例如，`<canvas>`元素用于动态图形绘制，`<audio>`和`<video>`元素简化了音频和视频的嵌入，`<input type="date">`等新的表单控件增强了用户输入体验。此外，HTML5还强化了离线存储能力，通过`AppCache`和`Service ...
H293_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
同时，表单控件的增强使得用户输入数据更加方便，例如<input type="date">、<input type="range">等。 其次，CSS3是CSS的最新版本，它提供了丰富的样式控制和动画效果。在本模板中，CSS3的媒体查询（Media Queries...
1105_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-03
例如，`<canvas>`元素用于图形绘制，`<video>`和`<audio>`元素支持多媒体播放，`<input type="date">`等新表单类型增强了用户输入体验。此外，H5还强化了离线存储（离线缓存）、拖放功能、地理定位等特性，使得网页...
1247_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-03
2. 表单控件增强：新增了<input type="date">、<input type="range">等类型，提供了更好的表单输入体验。 3. 多媒体支持：内建的和元素让音频和视频播放变得更加简单，无需依赖Flash等外部插件。 4. canvas画布：...
利用js实现input输入数据后自动进行计算，实时显示数据
光头强的博客
07-08 3万+
&lt;html&gt;     &lt;head&gt;     &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;          &lt;title&gt;无标题&lt;/title&gt;         &lt;script type="text/javasc
前端页面的搜索功能的实现
淡淡人生过的博客
06-04 3万+
&lt;input type="text" id="campus" class="layui-input" onkeyup="ck(this.value);" placeholder="请输入要查找的英语屋"&gt;//输入触发框 &lt;div class="layui-inline" id="campus"&gt;
去除页面多次双击时出现的蓝色背景
锦瑟年华L的博客
05-23 270
-moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none;
iView框架之Input输入框
热门推荐
a3060858469的博客
04-14 3万+
重点：https://www.iviewui.com/components/input
同步更新input中的内容
iteye_7547的博客
08-16 162
HTML： SR地址 逻辑地址 js: //添...
如何将input的value值的变化更新到innerHTML？
blackcat88的博客
03-21 2244
问题描述：input输入内容，查看html结构，value值仍是默认值，未设置默认值的情况也是空。 如果我想获取到这个变化，应该如何处理呢？ 解决办法：（jquery实现） (function ($) { var oldHTML = $.fn.html; $.fn.formhtml = function () { if (arguments.length) ...
html input 自动切换,a.html · 飞过的沙/自动切换input - Gitee.com
weixin_28711397的博客
05-30 129
JS自动切换焦点window.onload = function() {var EventUtil = {addhandler: function(element, type, handler) {if (element.addEventListenter) {element.addEventListenter(type, handler, false);} else if (element.at...
svg dom绘制五角星
12-30 1395
dom绘制五角星" TITLE="svg dom绘制五角星" /> <!DOCTYPE html>     <meta charset="utf-8">     svg dom绘制五角星             #mystar{             border: 1px solid red;             width: 100px;             height:
antd input输入完成后在触发
05-27
您可以使用Ant Design的Input组件的onBlur属性来实现输入完成后的触发。具体做法是在Input组件中添加onBlur属性，并传入一个回调函数，该函数会在输入框失去焦点时被调用。例如： ``` <Input onBlur={handleBlur} /...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值