页面点击按钮实现功能,可以使用鼠标点击实现,同时也可以使用“回车键”实现

页面点击按钮实现功能,可以使用鼠标点击实现,同时也可以使用“回车键”实现


Jsp页面

说明:只是举例子,所以里面像按钮的样式呀这些,都没有写,全是默认的,而我是学后端的对前端css样式这些也不是很熟悉,写的不好请多多见谅,就当个参考吧。

// onkeypress 事件会在键盘按键被按下并释放一个键时发生。
<body       onkeypress="search_enter()"   >


//一个简单的例子,按姓名搜索
</div>
	<input type="text" id="name" placeholder="搜索:姓名">
	<button type="button" id="search" onclick="serchName()"  >搜索</button> 
</div>



//实际代码我写到了js里,这里为了看着清楚,直接写到了body里
<script type="text/javascript" >

//主要是下面这段
	//敲回车键相当于确认键
	 function search_enter(){
   		 //回车键的ASCII值是13
   		 if(event.keyCode == 13){
       		 //调用搜索按键事件
        	document.getElementById("search").click();
   	 	}
 	}
 	

	//搜索
 	function serchName() {
		//获取前台输入数据,也就是要搜索的名字
		var name =document.getElementById("name").value;
		//传值到后台,我用的Ajax,后台代码不写了,跟这功能没关系
	  	$.ajax({
        	url: 'xxxx', //请求的url
        	type: 'post', //请求的方式
        	data:{
        		name: name
        	},
	        error:function (data) {
				alert(“搜索失败”);
        	},
        	success: function(data){ 
				alert(“搜索成功”);
			}
   		 });
	}
	
</script>

</body>

总结

1、< body> 里的 οnkeypress=“search_enter()”,和对应的函数一致
2、就是这个函数了

	  //敲回车键相当于确认键
	   function search_enter(){
			 //回车键的ASCII值是13
	 		if(event.keyCode == 13){
   		 	//调用搜索按键事件
    		document.getElementById("search").click();
 			}
		}
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值