Angular 5 + 如何在 IE 11 中使用键盘 left/right 选项逐字符移动光标
Angular 5 + How to move the cursor character by character using keyboard left/right options in IE 11
我正在使用 Angular 5 和 Ag-Grid Enterprise Addition。我使用的是IE11浏览器。不幸的是,在网格中,使用键盘 left/right 选项,光标会卡住并且不会移动到输入框中的下一个字符。所以,我想明确地将光标移动到下一个字符。我为此使用 Javascript 范围。我在 document.getSelection().addRange(range) 这行收到错误。请找到自定义 NumericComponent 的以下代码,输入框和错误的屏幕截图。我不确定这是否是正确的方法。谁能指导我如何解决这个问题?
<input #input id="numericinput" style="width: 100%; height: 100%;" (keydown)="onKeyDown($event)" [(ngModel)]="value" (dblclick) = "$event.target.select()">
<button (click)="clear()" style="position:absolute;top:5px;right:2px;cursor:pointer;color:grey;background-color:white;border:none;">
<span>❌</span>
</button>
onKeyDown(event): void {
var key = event.which || event.keyCode;
if(key === 37 || key === 39){
let error ;
event.stopPropagation();
let inputDocument = document.getElementById('numericinput');
let range = document.createRange();
range.collapse(true);
range.setEnd(inputDocument.firstChild, 0);
range.setStart(inputDocument.firstChild, this.input.element.nativeElement.value.length);
document.getSelection().removeAllRanges;
document.getSelection().addRange(range);
}
if (!this.isKeyPressedNumeric(event)) {
if (event.preventDefault) event.preventDefault();
}
}
下面是我完成任务的解决方案
var key = event.which || event.keyCode;
var iCaretPos = 0;
if(key === 37 || key === 39){
//Left or right
let inputDocument = document.getElementById('numericinput');
const element : HTMLInputElement = <HTMLInputElement>inputDocument;
event.stopPropagation();
let selectionStart = 0;
if(key === 39 && this.iCaretPos < element.innerHTML.length+1){
selectionStart = this.iCaretPos;
this.iCaretPos = this.iCaretPos +1;
}else if(key === 37 && this.iCaretPos !== 0){
selectionStart = this.iCaretPos;
this.iCaretPos = this.iCaretPos -1;
}
let selectionEnd = this.iCaretPos;
if (element.setSelectionRange) {
element.focus();
element.setSelectionRange(selectionStart, selectionEnd);
}
}
我正在使用 Angular 5 和 Ag-Grid Enterprise Addition。我使用的是IE11浏览器。不幸的是,在网格中,使用键盘 left/right 选项,光标会卡住并且不会移动到输入框中的下一个字符。所以,我想明确地将光标移动到下一个字符。我为此使用 Javascript 范围。我在 document.getSelection().addRange(range) 这行收到错误。请找到自定义 NumericComponent 的以下代码,输入框和错误的屏幕截图。我不确定这是否是正确的方法。谁能指导我如何解决这个问题?
<input #input id="numericinput" style="width: 100%; height: 100%;" (keydown)="onKeyDown($event)" [(ngModel)]="value" (dblclick) = "$event.target.select()">
<button (click)="clear()" style="position:absolute;top:5px;right:2px;cursor:pointer;color:grey;background-color:white;border:none;">
<span>❌</span>
</button>
onKeyDown(event): void {
var key = event.which || event.keyCode;
if(key === 37 || key === 39){
let error ;
event.stopPropagation();
let inputDocument = document.getElementById('numericinput');
let range = document.createRange();
range.collapse(true);
range.setEnd(inputDocument.firstChild, 0);
range.setStart(inputDocument.firstChild, this.input.element.nativeElement.value.length);
document.getSelection().removeAllRanges;
document.getSelection().addRange(range);
}
if (!this.isKeyPressedNumeric(event)) {
if (event.preventDefault) event.preventDefault();
}
}
下面是我完成任务的解决方案
var key = event.which || event.keyCode;
var iCaretPos = 0;
if(key === 37 || key === 39){
//Left or right
let inputDocument = document.getElementById('numericinput');
const element : HTMLInputElement = <HTMLInputElement>inputDocument;
event.stopPropagation();
let selectionStart = 0;
if(key === 39 && this.iCaretPos < element.innerHTML.length+1){
selectionStart = this.iCaretPos;
this.iCaretPos = this.iCaretPos +1;
}else if(key === 37 && this.iCaretPos !== 0){
selectionStart = this.iCaretPos;
this.iCaretPos = this.iCaretPos -1;
}
let selectionEnd = this.iCaretPos;
if (element.setSelectionRange) {
element.focus();
element.setSelectionRange(selectionStart, selectionEnd);
}
}