AngularJS directive input width resize by keyup

Question

I created a directive in order to make a input that has width automatically resized when keyup (like Google Contacts). However it seems not to be ok, because the width of ea

Answer 1

I've done this before. The solution I used is having an off-screen SPAN with the same text in it, with the same exact font as your textbox, and interrogating its width.

I might have something like this:

.textbox-copy {
  position: absolute;
  left: -9999px;
  top: -9999px;
  font: -webkit-small-control;
  font: -moz-field;
  font-size: 13px;
}

Then on keydown set the innerHTML of that SPAN, and check its current width. Note that, in Chrome and Firefox at least, an unstyled textbox has a special font of its own. It doesn't just inherit Arial or whatever.