`

上下选择

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
	html,body,div,a{padding:0;margin:0;}
	#d{ width:300px; margin:0 auto; border:1px solid #3366FF}
	#d a{ text-align:center;;width:300px; color:#000000; text-decoration:none; height:24px; line-height:24px; display:block}
	#d a:hover{ background-color:#FF6600}
</style>
<script type="text/javascript">
	function domLocation(node){  
            var left , top , right , bottom;  
            left = top = right = bottom = 0;  
            var n = node;  
            while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; };  
            right = left + node.offsetWidth; bottom = top + node.offsetHeight;  
            return {"left":left,"right":right,"top":top,"bottom":bottom,"width":node.offsetWidth,"height":node.offsetHeight}  
    }  
	
	
	    function getEvent(){     //同时兼容ie和ff的写法  
             if(document.all)    return window.event;          
             func=getEvent.caller;              
            while(func!=null){      
                 var arg0=func.arguments[0];  
                 if(arg0){  
                     if((arg0.constructor==Event || arg0.constructor ==MouseEvent)  
                         || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){      
                         return arg0;  
                     }  
                 }  
                 func=func.caller;  
            }  
            return null;  
     }  
	 
	var g = function(id){return "string" == typeof id ? document.getElementById(id) : id;},
	    c = function(tagName){return document.createElement(tagName);},
		apc = function(o,po){ (po || document.body).appendChild(o);};


	function isF60(a){
		var bgc = a.currentStyle ? a.currentStyle["backgroundColor"] : window.getComputedStyle(a, null)["backgroundColor"];
		if(bgc.toLowerCase() == "#ff6600" || ("rgb(255,102,0)" == bgc.replace(/\s+/ig,"")))
			return true;
		else 
			return false;
	}
	var cs,idx
	function toggelKey(upDownFlag){
		var f60flag = false;
		for(var i = 0; i < cs.length; i++){
			
			if(isF60(cs[i])){
				f60flag = true;
				idx = upDownFlag ? i-1 : i+1;
			}
			cs[i].style.backgroundColor = "";
		}
		if((!f60flag || idx == -1) && upDownFlag) idx = cs.length-1;
		else if((!f60flag || idx == cs.length) && !upDownFlag) idx = 0;
		cs[idx].style.backgroundColor = "#ff6600";
	}


	function ku(){
		var e = getEvent();
		if(e.keyCode == 38) toggelKey(true);
		else if(e.keyCode == 40) toggelKey(false);
		else if(e.keyCode == 13) cs[idx].focus();
	}

	window.onload = function(){
		cs = g("d").childNodes
	}
	
</script>
</head>
<body>
<input type="text" onkeyup="ku()">
<div id="d"><a href="javascript:" onfocus="alert(1)">1111111</a><a href="javascript:" onfocus="alert(2)">2222222</a><a href="javascript:" onfocus="alert(3)">3333333</a><a href="javascript:" onfocus="alert(4)">4444444</a><a href="javascript:" onfocus="alert(5)">5555555</a></div>
</body>
</html>

分享到:
评论

相关推荐

    js 实现 用键盘上下键实现表格行的上下选择

    js 实现 用键盘上下键实现表格行的上下选择! 值得下载看看!资源免费,大家分享!!

    键盘上下选择表单

    百度下拉的键盘选择! 无ajax,需要ajax的自己去搜索下,这个例子是键盘上下选择作用!

    文本框Autocomplete支持键盘上下选择,示例3个类型数据源

    通过使用这个插件,开发者可以轻松地为文本框添加键盘上下选择的特性,让用户能够通过键盘导航来选择建议的选项,而不仅仅是鼠标点击。 在"示例3个类型数据源"中,我们可以理解为这个示例展示了Autocomplete功能...

    c实现mp3上下选择和显示

    mp3上下键点击和显示的c语言代码。 第一行输入歌曲总数第二行输入上下键,之后显示,选中的歌曲用[]括起。 例如: 12 UD [1] 2 3 4

    combobox控件 屏蔽上下键 上下键控件间切换

    我们可以在这里检查消息参数,如果按下的是上下箭头键,可以选择忽略或者执行其他操作。例如: ```cpp BEGIN_MESSAGE_MAP(ComboBoxExt, CComboBox) ON_WM_KEYDOWN() END_MESSAGE_MAP() void ComboBoxExt::...

    易语言源码易语言列表项上下移动.rar

    在易语言中,列表项(List Item)是列表框(List Box)控件中的一个元素,用户可以通过列表项查看、选择或操作数据。列表项的上下移动功能通常用于实现用户交互,例如在列表中重新排序或展示动态变化的数据。 源码...

    asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    2. 键盘导航:用户可以通过键盘的上下箭头选择建议项,文本框内容会根据选择的建议项自动更新。特别地,当选择到列表的第一条或最后一条时,再按上下键应取消选中状态,恢复原来的输入内容,以避免信息丢失。 二、...

    android 上下滑动选择器

    在Android开发中,一个上下滑动的选择器是用于呈现用户可以选择的多项数据的UI组件。这类组件通常出现在底部,提供一种交互方式让用户在有限的选项中进行选择,比如日期、时间或者特定的列表项。标题提到的是...

    Android时间上下滑动调试源码

    在Android开发中,时间上下滑动调试是一种常见的交互方式,特别是在日程管理、闹钟设置或者时间选择器等场景中...同时,对于给出的"上下选择"的文件,可能是实现滑动操作的关键部分,包含了手势检测和动画的实现代码。

    Android代码-上下滚动选择器

    "Android代码-上下滚动选择器"这个项目,从标题来看,显然关注的是一个自定义的、允许用户通过上下滚动来选择特定值的控件。这个控件可能类似于Android原生的Spinner,但提供了更个性化的视觉效果和交互方式,比如...

    很炫的上下滑动选择

    "很炫的上下滑动选择"是一个专为提升用户交互体验而设计的功能,它利用JavaScript(script)、CSS(层叠样式表)等技术实现。下面将详细探讨这个功能的实现原理、应用场景以及相关技术。 一、实现原理 1. ...

    zTree封装辅助JS(弹出层,弹出层筛选,上下键选择)

    主要是传统下拉框的优化选择,分单选和多选两种类型,可以是弹出层形式,也可以是平铺的形式展现。 集成搜索,多选,区段识别功能,内置设置和获取选中的API。 搜索主要是用于单选时内容较多的情况。 多选支持全选和...

    详解RS-485上下拉电阻的选择

    在设计RS-485总线通信系统时,上下拉电阻的正确选择至关重要,因为它直接关系到总线的稳定性和通信的可靠性。 首先,需要明确为什么RS-485总线需要上下拉电阻。按照RS-485的标准,当总线上的差分电压大于+200mV时,...

    RS485上下拉电阻选择及计算,匹配电阻计算

    同时,《详解RS-485上下拉电阻选择.pdf》则会进一步解释上下拉电阻的作用、选择原则以及在不同场景下的最佳实践。 总的来说,正确选择和计算RS485的上下拉电阻和匹配电阻对于构建一个高效、可靠的通信网络至关重要...

    小程序源码 音乐上下首选择 (代码源)

    小程序源码 音乐上下首选择 (代码源)小程序源码 音乐上下首选择 (代码源)小程序源码 音乐上下首选择 (代码源)小程序源码 音乐上下首选择 (代码源)小程序源码 音乐上下首选择 (代码源)小程序源码 音乐上下首选择 ...

    jq年月日上下滑动选择日历插件兼容PC和移动端.zip

    《jq年月日上下滑动选择日历插件:打造跨平台日历交互体验》 在现代网页开发中,用户界面的交互性扮演着至关重要的角色。为了提升用户体验,开发者们常常会引入各种各样的插件,其中日历插件是常见的一个组件,尤其...

    数字滚动,数字上下滚动.zip

    条件编译允许开发者根据目标环境的不同,选择性地编译和执行特定的代码块。例如,在H5环境下可能需要使用某些Web API,而在小程序环境下则需要调用特定的小程序API。通过条件编译,开发者可以在同一份代码中处理这些...

    手机摄影- 12 手机摄影后期修图专业软件Snapsed详解(滤镜篇).pdf

    之后可以手指上下选择不同的选项:模糊强度,过渡(就是最外一圈的范围大小),晕影强度(就是暗角强弱)魅力光晕好像就是各种柔焦效果,小水桶可以选择不同预设,之后上下滑动可以选择:发光,饱和度,暖色调(白...

    javascript键盘上下键的操作(选择)

    ### JavaScript键盘上下键的操作(选择) #### 知识点概览 本文将详细介绍如何使用JavaScript来监听键盘事件,并根据用户的上下箭头按键操作来选择表格中的行或改变其背景色。我们将通过两个示例代码来具体说明这一...

    手机端日期选择js插件LCalendar-上下滑动特效

    LCalendar是一款专为手机端设计的日期选择JavaScript插件,其特色在于采用了上下滑动的交互效果,使得在移动端操作更为便捷和流畅。这款插件适用于各种需要日期选择功能的前端项目,例如在线预订、日程安排或者表单...

Global site tag (gtag.js) - Google Analytics