工作爬坑系列之回车触发查询实现

工作爬坑系列之回车触发查询实现

先说说原先的实现

因为用IE10这个比较古老的浏览器,他本身就有一个机制,当按下回车键就会触发click事件,所以就有了以下实现:

<button ng-click='func1()'>按钮1</button>
<button type='button' ng-click='func2()'>按钮2</button>
<button type='button' ng-click='func3()'>按钮3</button>

把第一个按钮的type='button’删除就可以了,当按下回车就会执行按钮1.
但是当一个页面有两个按钮需要实现回车查询,这种方式行不通了.
更可怕的是这个问题出现在了已经存在大量页面的项目中,简直就是噩梦.
这篇文章的目的就是要解决这个问题.

解决方案

回车查询逻辑其实很简单

<input ng-keyup='onKeyup($event)'>

$scope.onKeyup=(e)=>{
	// 这里是为了兼容IE
	let code = window.event?e.keyCode:e.which
	if(code=='13'){
		//调用要执行的查询
	}
}

鉴于页面太多,每个页面重新写肯定不现实.为了减少工作量,封装成指令不失为一种比较合理的解决方案.代码如下:

class directive{
	contructor(){
		this.restrict='A'
		this.scope = {
			enterKey:'&?'
		}
	}
	link(scope,element){
		element.key((event)=>{
			// 这里是为了兼容IE
			let code = window.event?e.keyCode:e.which
			if(code=='13'){
				//调用要执行的查询
			}
		})
	}
}
//这里只要export一下,然后做个挂载就可以拉
//这里把指令命名为enter-key

这种方式只需要在html需要的input标签加一行代码就ok

<input enter-key='func()'>
<button type='button' ng-click='func()'></button>

这样点击按钮跟回车都可以触发查询

PS

博主用的框架比较老,不同框架的写法略微有些不一样,但是实现思路都是一样滴