原生js实现输入框焦点切换

实现的效果：

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.oul{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #000000;position: relative;}.box{width: 150px;height: 150px;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;/* background-color: red; */display: flex;justify-content: space-between;align-items: center;}.ali{display: inline-block;width: 20px;height: 20px;text-align: center;}</style></head><body><div class="oul"><div class="box"><input type="text" maxlength="1" class="ali" autofocus="autofocus"/><input type="text" maxlength="1" class="ali" onclick="this.blur()"/><input type="text" maxlength="1" class="ali" onclick="this.blur()"/><input type="text" maxlength="1" class="ali" onclick="this.blur()"/></div></div><script type="text/javascript">var Oul=document.getElementsByClassName('box')[0]Oul.oninput=function(e){var e=window.event||evar tar=e.target || e.srcElement   if(tar.nodeName=='INPUT' && tar.nextElementSibling!==null){tar.nextElementSibling.focus()}}</script></body>
</html>

原生js实现输入框焦点切换相关推荐

原生js实现tab栏切换效果
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识运行效果首先我们来看一下原生js实现的效果下面就开始直接上代码了 index.html <!DOCTYPE h ...
html原生轮播图的实现,使用原生js实现点击切换图片（轮播图）效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签二.css样式设 ...
qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
原生js实现Tab切换
本课标题: Tab切换引入话术: 咱们刚才讲了,碰壁反弹,拖拽盒子,这两个动画,用到了offset系列,client系列,咱们是不是还要计算,对吧,比较麻烦,咱们再讲一个比较简单一点的动画,tab切 ...
原生JS实现切换不同图片的特效
分享一个由原生JS实现的图片切换特效,效果如下: 原理比较简单,实现的代码如下: <!doctype html> <html><head><meta char ...
根据id删除localstorage数据_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
js事件里面套事件怎么不管用_原生js利用localstorage实现简易TODO list应用
前言:小生不才,只懂得一些皮毛,我努力以最简单的语言将心中的想法表述出来,让更多人能够很轻松的弄明白.文章里面有不足之处望各位大牛指出,使得后面的文章能够朝着更好的方向发展.另外,大家记得点赞哟! 欢 ...
js 控制鼠标_原生js实现改变视频播放速率
前言:前几天考研成绩刚刚出来,有人欢喜有人悲,不管结果怎么样,只要努力过,就不存在遗憾一说.大家都知道考研复习的时候会有大量的时间用来看教学视频,就比如说"张宇高数"等等.考研复习 ...
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...

原生js实现输入框焦点切换

原生js实现输入框焦点切换相关推荐

最新文章

热门文章