Search code examples
javascriptangularcursorinternet-explorer-11ag-grid

Angular 5 + How to move the cursor character by character using keyboard left/right options in IE 11


I am using Angular 5 with Ag-Grid Enterprise Addition. I am using IE11 browser. Unfortunately in the grid, the cursor gets stuck and not moving to next characters in the input box using keyboard left/right options. So, I thought of explicitly moving the cursor to next characters. I am using Javascript range for that. I am getting the error at this line document.getSelection().addRange(range). Please find the below code of the custom NumericComponent ,screenshot of input box and error. I am not sure if this is the right approach. Can anyone guide me how to fix this issue ?

<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>&#10060;</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();
        }

    }

enter image description here


Solution

  • Below is the solution from which I achieved the task

    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);
                }        
            }