当在input框里输入文字时,希望输入框的宽度可以随着文字的长度进行变化,但是由于中文和英文的,以及字体和大小的不同,会导致文字占的长度是有所差异的,以下代码可以解决这个问题
html
<input type="text" class="edit-name float-left" [(ngModel)]="inputTitle" (input)="setWidthByValue()">
ts部分的逻辑
public calculateTextWidth(value: string) {
const style = this.getStyle();
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = `${style.fontSize}px ${style.fontFamily}`;
return ctx.measureText(value).width;
}
public getStyle() {
const style = window.getComputedStyle(this.titleEle.nativeElement, '').getPropertyValue('font-size');
const fontFamily = window.getComputedStyle(this.titleEle.nativeElement, '').getPropertyValue('font-family');
const fontSize = parseFloat(style);
return {fontFamily: fontFamily, fontSize: fontSize};
}
public setWidthByValue() {
this.titleEle.nativeElement.style.width = this.calculateTextWidth(this.inputTitle) + 12 + 'px';
}
复制代码