anglejs2 텍스트 상자로 텍스트를 입력하는 방법을 확인하는 방법은 무엇입니까?

Question

HTML 텍스트 상자가 3 개 있습니다. 각 텍스트 상자의 초기 너비는 각각 30px입니다. 누군가가 텍스트 상자 텍스트 중 하나에 입력하여 상자 너비를 초과하는 경우 세 텍스트 상자의 너비가 가장 큰 텍스트 상자의 크기와 일치하도록 확장하려고합니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

@Component({ 
    selector: 'my-app', 
    styles: [`#size 
{ 
    position: absolute; 
    visibility: hidden; 
    height: auto; 
    width: auto; 
    white-space: nowrap; /* Thanks to Herb Caudill comment */ 
}`] 
    template: ` 
    <div id="size" #size>{{text}}</div> 
    <input #inp [(ngModel)]="text" 
       (ngModelChange)="width=size.clientWidth" 
       [style.width.px]="width > 50 ? width +10 : 60"> 
    `, 
}) 

Plunker link

이 사용하는 입력 요소로 각 입력이 같은 들어있는 숨겨진 <div>의 크기에 맞게 업데이트됩니다 변경에 같은 글꼴 스타일을 필요로 <div> 숨겨진 본문.

도 참조 Calculate text width with JavaScript