js input连续输入回退连续删除 js input模仿移动端连续输入回退连续删除全网只有一份

最新推荐文章于 2022-11-04 11:45:17 发布

1登峰造极

最新推荐文章于 2022-11-04 11:45:17 发布

阅读量1.3k

点赞数

分类专栏： js jquery html css 文章标签： js 模仿手机连续输入回退删除 js连续输入回退删除

本文链接：https://blog.csdn.net/qq_33323469/article/details/82779239

版权

js 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

html

19 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

确实是全网找不到的例子，也确实是吹牛逼公司前端写了一点，但是存在ug当输入完四个，回退删了两个，获取的只剩下两个，我又天天补补了一下,
直接上代码吧

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>模仿移动端的input连续输入回退删除</title>
		<style type="text/css">
			.box {
				width: 350px;
				height: 100px;
				margin: 0 auto;
			}
			
			.box input {
				width: 40px;
				height: 40px;
				margin: 5px 13px;
				text-align: center;
				line-height: 40px;
				border-radius: 3pxgrouponStart;
				border: 1px solid red;
			}
			.num{
				width: 354px;
				height: 100px;
				margin: 0 auto;
				background: #000c0c;
			}
			.num h1{
				text-align: center;
				line-height: 100px;
				color: #fff;
			}
		</style>
	</head>

	<body>
		
		<div class="box">
			<input type="" name="" class="a" id="btn1" value="" maxlength="1" />
			<input type="" name="" class="a" id="btn2" value="" maxlength="1" />
			<input type="" name="" class="a" id="btn3" value="" maxlength="1" />
			<input type="" name="" class="a" id="btn4" value="" maxlength="1" />
		</div>
		
		
		<div class="num">
			<h1 id='codetxt'>
			
		    </h1>
		</div>
	    <p style="text-align: center;width: 1000px;display: block;margin: 20px auto;color: plum;">
			模仿手机端input连续输入，删除时连续删除。这种情况用于验证吗的输入，比如后台给了一个验证码
			我们需要输入这个验证码去后台验证的情况，存在点bug，但是当我们输入满了四个验证码就会执行下面的弹窗方法
			如果不加那个方法，输入满了四个后面的数字还会继续增加，input中的maxlength这个属性为什么不启用，
			我也好奇。
		</p>	
	</body>

</html>
<script type="text/javascript">
	var code;//定义全局的code 页就是最后输入完的四位数验证码
	var btns = document.getElementsByClassName('a');
	code = '';
	for(var i = 0, btnlength = btns.length; i < btnlength; i++) {
		btns[0].focus();
		btns[i].onkeyup = (function(i) {
			return function() {

				if(this.value.length == 1) {

					if(i + 1 < btnlength) {

						btns[i + 1].focus();
						code += btns[i].value;
					}
					if(i == btnlength - 1) {
						code = code + btns[i].value;
						var btn2val = document.getElementById('btn2').value;

						for(var c = 0; c < code.length; c++) {
							code1 = code[0];
							if(code.length == 3) {//这一段感觉没严谨但是效果师达到了
								btn4val = document.getElementById('btn4').value;
								btn3val = document.getElementById('btn3').value;
								code = code1 + btn2val + btn3val + btn4val;
							}
						}
					   document.getElementById('codetxt').innerHTML = code;//这一句实际中用不上，只是用于上面的打印
						//这里就可以调用方法，例如opwen()
						openserch();
					}

				} else {
					if(i - 1 >= 0) {
						btns[i - 1].focus();
						btns[i - 1].value = '';
						code = '';
						code = code + btns[i - i].value;
                       document.getElementById('codetxt').innerHTML='';//这一句实际中用不上，只是用于上面的打印
					}

				}

			}

		})(i)
	}
	
	function openserch(){
		alert(code);
		
		//这里就可以像后台发送请求，帮这个输入的验证码拿去后台验证
		
	}
</script>

1登峰造极

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js input连续输入回退连续删除 js input模仿移动端连续输入回退连续删除全网只有一份

确实是全网找不到的例子，也确实是吹牛逼公司前端写了一点，但是存在ug当输入完四个，回退删了两个，获取的只剩下两个，我又天天补补了一下,直接上代码吧&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;模仿移动端的input连续输入回退删除&lt;/tit..
复制链接

扫一扫