如何让输⼊框的宽度可以随着⽂字的长度进⾏变化
当在input框⾥输⼊⽂字时，希望输⼊框的宽度可以随着⽂字的长度进⾏变化，但是由于中⽂和英⽂的，以及字体和⼤⼩的不同，会导致⽂字占的长度是有所差异的，以下代码可以解决这个问题
html
<input type="text" class="edit-name float-left" [(ngModel)]="inputTitle" (input)="setWidthByValue()">
ts部分的逻辑
public calculateTextWidth(value: string) {
const style = Style();
const canvas = ateElement('canvas');
const ctx = Context('2d');
ctx.font = `${style.fontSize}px ${style.fontFamily}`;
asureText(value).width;
}
public getStyle() {
const style = ComputedStyle(this.titleEle.nativeElement, '').getPropertyValue('font-size');
const fontFamily = ComputedStyle(this.titleEle.nativeElement, '').getPropertyValue('font-family');
const fontSize = parseFloat(style);
return {fontFamily: fontFamily, fontSize: fontSize};
}
public setWidthByValue() {
input框禁止输入this.titleEle.nativeElement.style.width = this.calculateTextWidth(this.inputTitle) + 12 + 'px';
}
复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。