将光标放在html表格单元格中文本的末尾

Question

想要在每个<td> 的文本末尾设置光标焦点

 <table #sampleTable>
     <th>name</th>
     <th>number</th>
     <tr>
         <td #name contenteditable="true">
             jack
         </td>
         <td #number contenteditable="true">
             5487
         </td>
     </tr>
 </table>

组件.ts

@ViewChild('name') colName;
 ...
 ngAfterViewInit(){
     setTimeout(() => {
         this.colName.nativeElement.focus() //setting focus at name column
     }, 1000);   
 }

但无法在文本末尾设置光标。任何人都可以在不使用 Jquery 的情况下以 angular 的方式帮助我。

Answer 1

演示：https://stackblitz.com/edit/angular-svtdvv

将此答案合并到浏览器兼容性解决方案中： contenteditable, set caret at the end of the text (cross-browser)

  @ViewChild('name') colName;
  ngAfterViewInit() {
    this.placeCaretAtEnd(this.colName.nativeElement);
    this.colName.nativeElement.focus();

  }

  placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
      var range = document.createRange();
      range.selectNodeContents(el);
      range.collapse(false);
      var sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
    } 
    else if (typeof (<any>document.body).createTextRange != "undefined")      {
      var textRange = (<any>document.body).createTextRange();
      textRange.moveToElementText(el);
      textRange.collapse(false);
      textRange.select();
    }
  }