0

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" >
shamon shamsudeen
  • 5,466
  • 17
  • 64
  • 129

2 Answers2

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" >
Lalit
  • 1,354
  • 1
  • 8
  • 13
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" >
Vasyl Moskalov
  • 4,242
  • 3
  • 20
  • 28