个人博客 个人博客

2020 记录精彩的程序人生

目录
Angular 8 实现回车和上下左右键,进行切换input焦点(@HostListener事件绑定/@HostBinding属性绑定)
/  

Angular 8 实现回车和上下左右键,进行切换input焦点(@HostListener事件绑定/@HostBinding属性绑定)

1.前端Html

<td>
    <input  type="text" onfocus="this.select()"  id="quickCode_{{i}}"
(keyup)="quickCodeQuery(elementControl,'dpParentItemNo','dpParentItemName')"
class="form-control input-sm" formControlName="quickCode">
</td>

<td>
    <input  type="text" onfocus="this.select()"  id="dpWidth_{{i}}" class="form-control input-sm"
formControlName="dpWidth">
</td>

<td>
    <input  type="text" onfocus="this.select()"  id="dpHeight_{{i}}" class="form-control input-sm"
formControlName="dpHeight">
</td>

<td>
    <input  type="text" onfocus="this.select()"  id="dpQty_{{i}}" class="form-control input-sm"
formControlName="dpQty">
</td>

2.ts业务逻辑
@HostBinding()可以为指令的宿主元素添加类、样式、属性等。
@HostListener()可以监听宿主元素上的事件。
在ts先引入:

@HostListener('document:keyup', ['$event'])
handleKeyboardEvent(kbdEvent:  KeyboardEvent)  {
   this.upDownLeftRightEvent(kbdEvent.keyCode);
}

具体实现:

upDownLeftRightEvent(keyCode:  any)  {
    let  focusEleId  =  document.activeElement.id;
    let  rowNumId  =  Number(focusEleId.split('_')[1]);
    if (keyCode  ===  13) {  // 回车
        this.setEnterFocus(focusEleId,  rowNumId);
    }
    if (keyCode  ===  37) {  // 左
	this.setLeftFocus(focusEleId,  rowNumId);
    }
    if (keyCode  ===  38) {// 上
	rowNumId--;
	this.setUpAndDownFocus(focusEleId,  rowNumId);
    }
    if (keyCode  ===  39) {// 右
	this.setRightFocus(focusEleId,  rowNumId);
    }
    if (keyCode  ===  40) {// 下
	rowNumId++;
	this.setUpAndDownFocus(focusEleId,  rowNumId);
    }
}

private  setEnterFocus(focusEleId:  string,  rowNumId:  number)  {
    if (focusEleId.indexOf('quickCode') !==  -1) {
	$('#dpWidth_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpWidth') !==  -1) {
	$('#dpHeight_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpHeight') !==  -1) {
	$('#dpQty_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpQty') !==  -1) {
	rowNumId++;
	$('#quickCode_'  +  rowNumId).focus();
    }
}

private  setRightFocus(focusEleId:  string,  rowNumId:  number)  {
    if (focusEleId.indexOf('quickCode') !==  -1) {
	$('#dpWidth_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpWidth') !==  -1) {
	$('#dpHeight_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpHeight') !==  -1) {
	$('#dpQty_'  +  rowNumId).focus();
    }
}

private  setLeftFocus(focusEleId:  string,  rowNumId:  number)  {
    if (focusEleId.indexOf('dpQty') !==  -1) {
	$('#dpHeight_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpHeight') !==  -1) {
	$('#dpWidth_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpWidth') !==  -1) {
	$('#quickCode_'  +  rowNumId).focus();
    }
}

private  setUpAndDownFocus(focusEleId:  string,  rowNumId:  number)  {
    if (focusEleId.indexOf('quickCode') !==  -1) {
	$('#quickCode_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpQty') !==  -1) {
	$('#dpQty_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpHeight') !==  -1) {
	$('#dpHeight_'  +  rowNumId).focus();
    }
    if (focusEleId.indexOf('dpWidth') !==  -1) {
	$('#dpWidth_'  +  rowNumId).focus();
    }
}