Javascript:Adjust input field width based on text

Question

I am trying to implement auto sized text field based on the solution from this question

<input style="width:20px;" onkeypress="this.style.width = ((this.value.length + 1) * 5) + 'px';"  ng-model="questionButtons[$index].title" type="text" class="edt_spn active" >

it works fine however when the user deletes characters width is not adjusting

<input style="width:20px;" onkeypress="this.style.width = ((this.value.length + 1) * 5) + 'px';"  ng-model="questionButtons[$index].title" type="text" class="edt_spn active" >

Lalit · Accepted Answer · 2018-02-21 06:00:17Z

1

Try onkeyup event.

<input style="width:20px;" onkeyup="this.style.width = ((this.value.length + 1) * 5) + 'px';console.log(this.value.length);"  ng-model="questionButtons[$index].title" type="text" class="edt_spn active" >

answered Feb 21, 2018 at 6:00

Lalit

1,3691 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vasyl Moskalov · Accepted Answer · 2018-02-21 06:04:00Z

0

I think that the best variant is to use oninput event.

From MDN:

The DOM input event is fired synchronously when the value of an <input>, <select>, or <textarea> element is changed.

<input style="width:20px;"  oninput="this.style.width = ((this.value.length + 1) * 5) + 'px';"  ng-model="questionButtons[$index].title" type="text" class="edt_spn active" >

answered Feb 21, 2018 at 6:04

Vasyl Moskalov

4,6403 gold badges24 silver badges30 bronze badges

Collectives™ on Stack Overflow

Javascript:Adjust input field width based on text

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related