zoukankan      html  css  js  c++  java
  • 键盘上下键选取值li的值到input

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
    .current{background-color:red}
    </style>
    </head>
    <body>
    <input id="SearchResult" type="text"/>
    <ul id="ulSearch">
    <li>中海创集团</li>
    <li>福大自动化</li>
    <li>奥迈软件e79fa5e98193e4b893e5b19e31333366306435</li>
    <li>自控规划部</li>
    <li>爱普科技</li>
    <li>IAP</li>
    <li>ISEE</li>
    <li>联排联调</li>
    <li>水系</li>
    <li>云计算</li>
    </ul>
    <script>
    	var list = document.getElementById("ulSearch").getElementsByTagName("li");
    	var index = -1;
    	function addIndex() {
    		index = index>=9 ? 0 : ++index;
    		return index;
    	}
    	function reduceIndex() {
    		index = index <= 0 ? 9 : --index;
    		return index;
    	}
    	document.onkeydown = function(e) {
    		e = e || window.event;
    		switch(e.keyCode){
    			case 13:
    			var t = document.getElementById("ulSearch").getElementsByTagName("li")[index].innerHTML;
    			document.getElementById("SearchResult").value = t;
    			break;
    			case 38:
    			reduceIndex();
    			setLiColorByClass();
    			break;
    			case 40:
    			addIndex();
    			setLiColorByClass();
    			break;
    		}
    		function setLiColorByClass(){
    			for(var i = 0,len=list.length; i<len; i++) {
    				list[i].className = i==index ? "current" : "";
    			}
    		}
    	};
    </script>
    </body>
    </html>
    
    

    转载:https://zhidao.baidu.com/question/584524937.html

    优化版(向下到最后一个li后再按下箭头则循环到第一个li):
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style>
    .current{background-color:red}
    </style>
    </head>
    <body>
    <input id="SearchResult" type="text"/>
    <ul id="ulSearch">
    <li>中海创集团</li>
    <li>福大自动化</li>
    <li>奥迈软件e79fa5e98193e4b893e5b19e31333366306435</li>
    <li>自控规划部</li>
    <li>爱普科技</li>
    <li>IAP</li>
    <li>ISEE</li>
    <li>联排联调</li>
    <li>水系</li>
    <li>云计算</li>
    </ul>
    <script>
    	var list = document.getElementById("ulSearch").getElementsByTagName("li");
    	var index = -1;
    	var liLength = list.length-1;//比上一版多了-1
    	function addIndex() {
    		index = index>= liLength ? 0 : ++index;
    		return index;
    	}
    	function reduceIndex() {
    		index = index <= 0 ? liLength : --index;
    		return index;
    	}
    	document.onkeydown = function(e) {
    		e = e || window.event;
    		switch(e.keyCode){
    			case 13:
    			var t = document.getElementById("ulSearch").getElementsByTagName("li")[index].innerHTML;
    			document.getElementById("SearchResult").value = t;
    			break;
    			case 38:
    			reduceIndex();
    			setLiColorByClass();
    			break;
    			case 40:
    			addIndex();
    			setLiColorByClass();
    			break;
    		}
    		
    	};
    
    	function setLiColorByClass(){
    			for(var i = 0,len=list.length; i<len; i++) {
    				list[i].className = i==index ? "current" : "";
    			}
    			console.log(list.length);
    		}
    
    
    </script>
    </body>
    </html>
    
    
  • 相关阅读:
    窗体设计器出不来
    maven ...../.m2/settings.xml
    myeclipse.ini
    人民币大小写
    驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立 安全连接。错误:
    写了一个浏览器插件
    用Excel计算加权平均分和GPA
    cfree使用cygwin编译程序出现计算机丢失cygwin1.dll解决办法
    apt-cyg update --2017-02-17 07:57:24-- http://mirrors.163.com/cygwin//x86_64/setup.bz2 正在解析主机 mirrors.163.com... 123.58.173.185, 123.58.173.186 正在连接 mirrors.163.com|123.58.173.185|:80... 已连接。 已发出 HTT
    生产者消费者问题
  • 原文地址:https://www.cnblogs.com/pangchunyu/p/12851750.html
Copyright © 2011-2022 走看看