jq 键盘事件，点击键盘上的上键，input上一个获取焦点，点击下键，input下一个获取焦点...

最新推荐文章于 2022-03-17 16:24:59 发布
最新推荐文章于 2022-03-17 16:24:59 发布
阅读量298 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yjgbk/p/10136122.html
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	</head>

	<body> 
		<ul>
			<li><input type="text" /></li>
			<li>
				<ol class="one">
					<li><input type="text" /></li>
					<li><input type="text" /></li>
					<li><input type="text" /></li>
					<li><input type="text" /></li>
					<li><input type="text" /></li>
				</ol>
			</li>
		</ul>
		<ol class="two">
			<li><input type="text" /></li>
			<li><input type="text" /></li>
			<li><input type="text" /></li>
			<li><input type="text" /></li>
			<li><input type="text" /></li>
		</ol>
		<dl> 
			<dd><input type="text" /></dd>
			<dd><input type="text" /></dd>
			<dd><input type="text" /></dd>
			<dd><input type="text" /></dd>
			<dd><input type="text" /></dd>
		</dl>
		<script>
			$(function() {
				var flag = false,index=0;
				function focusZ($lis) {
					$lis.keydown(function(event) {
						if(!flag){
							return false;
						};
						switch(event.keyCode) {
							case 38:
								if(index!=0){ 
									focusL($lis,index-1);
								};
								console.log(index);
								console.log('上')
							break;
							case 40:
								if(index!=($lis.length-1)){
									 
									focusL($lis,index+1);
								};
								console.log(index);
								console.log('下');
							break;
						};
					});
				};
				
				function focusL($lis,num) {
					$lis.eq(num).find("input").focus();
				};
				
				function Lifocus(obj){
					obj.on("focus","input",function(){
						flag=true;
				        index = $(this).parent('li').index();    
				        console.log(index);
				    });
				    focusZ(obj);
				}
				
				Lifocus($(".one li"));
				Lifocus($(".two li"));
				Lifocus($(".dl dd"));
				 
			})
		</script>
	</body>
</html>

　　

转载于:https://www.cnblogs.com/yjgbk/p/10136122.html

weixin_30536513
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现input框获取焦点的方法
10-20
总结以上，使用jQuery实现input框获取焦点的方法涉及了事件绑定、事件触发、以及DOM遍历和操作，这些操作使得我们能够为用户提供更直观的交互体验。在实际开发中，类似的技术会被广泛应用在表单处理、用户交互和数据...
移动端 关于 键盘将input 框 顶上去的解决思路
ITzhongzi的博客
08-08 8741
不管是上面的textarea还是下面的input输入框，它们任意一个获得焦点的时候，手机的虚拟键盘都会抬起将fixed定位于屏幕最低端的 “提交”按钮顶到屏幕 “中间”位置，严重影响布局，这就测试人员来看是一个不可饶恕，已经足已被开除的底部，怎么解决这个问题呢？对于布局不是很复杂的 "提交"页面而言，可以采用动态获取底部footer的offset().top 再减去其父元素offset().top
html input框上移,小程序input输入框键盘弹出使得布局上移问题
weixin_42509236的博客
07-02 1001
注意点：1.style='bottom:{{inputBottom}}px'单位用px2.input的 adjust-position='{{false}}'要用falsehtml部分：发送css部分：.inputBottom{width: 100%;position: fixed;left: 0rpx;bottom: 0rpx;background: #fff;height: 100rpx;bo...
Input鼠标键盘输入
Go_Accepted的博客
03-17 1319
// 注意：输入相关内容肯定是写在Update中的 1、鼠标再屏幕的位置 // 屏幕坐标的原点是在屏幕的左下角，往右是x轴正方向，往上是y轴正方向，返回值是Vector3，但是只有x，y有值，z一直是0，是因为屏幕本来就是2D的，不存在Z轴 Input.mousePosition() 2、检测鼠标输入 // 鼠标按下相关检测，对于我们来说，可以来作：（1）发射子弹（2）控制摄像机移动 // 只有鼠标按下一瞬间才触发一次 // 0左键，1右键，2中键 Input.GetMou
jquery键盘事件实现enter、上下左右切换input焦点
一条小鲫鱼的博客
07-10 1498
jquery键盘事件实现enter、上下左右切换input焦点 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>表单事件 and 键盘事件and 回车和小键盘切换input焦点</title> <sty...
angular form表单错误提示并自动focus第一个input
前端 潇凡-一个标准前端IT女
12-23 2847
if (!isValid) { alert('请输入必填项信息，并保证长度和格式正确！'); var errorField; if (!!errors.required) { errorField=errors.required[0].$name; }
enter键控制input光标移动到下一个框
10-24
当用户在某个输入框中按下"Enter"键时，事件处理函数会防止默认的表单提交行为，并计算出下一个应该获得焦点的输入框。如果当前输入框是最后一个，`nextInput`将被设置为第一个输入框，确保循环导航。 通过这种方式...
jQuery实现手机上输入后隐藏键盘功能
10-20
在这个场景中，当用户在输入框中输入完整的11位手机号码后，键盘将自动消失，转而聚焦到“获取验证码”的按钮上。 首先，我们来看一下HTML的表单结构。这里有两个输入框，一个用于输入手机号码，另一个用于输入...
基于 jQuery 实现键盘事件监听控件
10-17
文件中提到的两种方法分别是修改目标元素的属性，比如设置tabindex值使其可以获取焦点，以及将键盘事件监听委托给可以获得焦点的其他元素。此外，还提到通过监听鼠标移入事件来实现目标元素的自动获得焦点，这样用户...
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
10-28
3. 使用`$('input').focus()`函数为所有`input`元素绑定`focus`事件，当输入框获得焦点时，为其添加一个高亮显示的类（如`.redBack`）。 4. 使用`$('input').blur()`函数为所有`input`元素绑定`blur`事件，当输入框...
两种让元素获取焦点的方法
u013345082的博客
11-23 2125
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .test1{width:400px;min-height:120px;max-height:300px;border:1px ...
移动端 验证码/密码 输入框实现--安卓/ios适用
m0_37097272的博客
07-05 3850
先贴图，需要实现的效果是这样的。 实现思路有两个： 1、用6个input，输入一个数字后将focus给下一个输入框。 2、用一个input和6个span，input隐藏，用span显示。 现在大部分都是使用的第二种方法。（当然，如果你能说服产品也可以只用一个普通的input输入框，就什么都不用考虑了） 两种方案遇到的坑，以及优缺点，如下： 方案一：6个inp...
html页面自动输入数字,js input框输入1位数字后自动跳到下一个input框聚焦
weixin_42501298的博客
06-10 1733
// 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...
jQuery 键盘事件
柯晓楠
11-28 6240
概念 个人理解： 在浏览器中，当用户操作键盘是，会触发键盘事件，触发的键盘事件主要有3种：keydown、keypress、keyup。 keypress() 事件函数 说明： 当键盘或按钮被按下时，发生 keypress 事件。keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。 如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。 ke
多个input输入框 限制每个输入框输入一位 输入完成自动获取下一个input焦点
姜&腾腾的专栏
08-21 9300
多个input自动获取下一个input焦点 #wrap { margin: 50px auto; width: 300px; text-align: center; } #wrap div{ width: 206px; margin: 10px auto; } #w
获取inpu焦点，输入完后自动跳到第二个input
鲁元的博客
10-10 7273
效果类似下面这种： 实现代码： html>   head>         meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         title>             RunJS 演示代码         title>
jq写一个图片加文字上下无缝滚动
最新发布
06-10
你可以通过以下代码实现使用jQuery实现图片加文字上下无缝滚动的效果： HTML代码： ``` <div id="scroll-container"> <div class="scroll-item"> <img src="image1.jpg"> <div class="text">图片1</div> </div> <div class="scroll-item"> <img src="image2.jpg"> <div class="text">图片2</div> </div> <div class="scroll-item"> <img src="image3.jpg"> <div class="text">图片3</div> </div> </div> ``` CSS代码： ``` #scroll-container { height: 200px; overflow: hidden; } .scroll-item { display: flex; align-items: center; margin-bottom: 20px; } .scroll-item img { width: 100px; height: 100px; margin-right: 20px; } .scroll-item .text { font-size: 16px; } ``` JS代码： ``` var container = $('#scroll-container'); var items = container.find('.scroll-item'); var itemHeight = items.eq(0).outerHeight(); var currentIndex = 0; var timer = setInterval(function() { var clone = items.eq(currentIndex).clone(); container.append(clone); container.animate({scrollTop: '+=' + itemHeight}, 500, function() { clone.remove(); currentIndex++; if (currentIndex >= items.length) { currentIndex = 0; } }); }, 3000); ``` 以上代码实现了每隔3秒钟滚动一个图片和文字项，并在滚动到最后一项时实现无缝循环滚动的效果。你可以根据自己的需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值