javascript - 绑定了数据的textarea如何设置焦点位置？

问题描述

问 题

我刚开始用的是ion-textatea,发现如果要使用setSelectionRange这个方法需要转成nativeElement,控制台输出如图
，
这样可以获取焦点但是改变不了焦点的位置。

post.html

 <ion-label floating>你在做什么</ion-label> 
     <ion-textarea  #post rows='12' [(ngModel)]="data.message" (ngModelChange)='msgCount($event)'></ion-textarea>
 </ion-label>

post.ts

export class PostPage implements OnInit{
        @ViewChild('post') postEl;
        constructor(public params:NavParams){
        this.data={
            message:''
        };
    }
        ngOnInit(){
        let msg=this.params.get('msg');
        if(msg){
          let el=this.elRef.nativeElement.querySelector('textarea');
          this.data['message']=msg;
          this.setCaretPosition(el,0);
        }
    }
    setCaretPosition(elem, caretPos) {
       var range;
       console.log(elem);
       if (elem.createTextRange) {
           range = elem.createTextRange();
           range.move('character', caretPos);
           range.select();
       } else {
          elem.focus();
          elem.setSelectionRange(caretPos, caretPos);

       }
    }
}

然后，我把<ion-textarea>换成了<textarea></textarea>，获取不到焦点也设置不了焦点的位置。
google后我找到了别人做的一个demo，Set Cursor Position In Text Area Using Angular 2。我比较了一下他和我不一样的地方，他的textarea没做数据绑定，textarea本身就存在value，而我的数据是绑定在textarea上面的。
所以的在调用setCaretPosition函数之前先加了一段

this.postEl.nativeElement.value=msg;

结果仍然没有效果。此时的我已经黔驴技穷了，求问有什么解决办法么。

解决方案

原来是生命周期钩子的问题，修改后：

@Component({
   selector:'post-page',
   providers:[dataService],
   inputs:['postMsg'],
   templateUrl:'post.html'
 })
 export class PostPage implements OnInit,AfterViewInit{
   data:Object;
   msgLength:string | number;
   imageUrl:string='';
   options:any=null;
   postMsg:string;
   @ViewChild('post') postEl;
   image:any;
     constructor(){
      }
    ngOnInit(){
        let msg=this.params.get('msg');
        if(msg){
          this.postMsg=msg;
        }
      }
      ngAfterViewInit(){
        if(this.postMsg){
          this.setCaretPosition(this.postEl.nativeElement,0);
        }
      }
}

这篇关于javascript - 绑定了数据的textarea如何设置焦点位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！