Menu
I have 3 text boxes in HTML, each has an initial width of 30px each. I want to make it so that, in the event that someone types into one of the text boxes text such that it exceeds the width of the box, the width of all three text boxes expands to match the size of the largest text box. What is the best way to do this?
526
The ng-blur directive tells AngularJS what to do when an HTML element loses focus. The ng-blur directive from AngularJS will not override the element's original onblur event, both the ng-blur expression and the original onblur event will be executed.
The ng-maxlength directive adds a restriction to an input field, and to the validator of the form. The ng-maxlength is not the same as the maxlength attribute in HTML, which will prevent users from typing more than the restricted number of characters.
The ng-bind directive tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression. If the value of the given variable, or expression, changes, the content of the specified HTML element will be changed as well.
@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
It uses a hidden <div> that needs the same font style as the input element and on each change the input will be updated to match the size of the hidden <div> that contains the same text.
See also Calculate text width with JavaScript
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
