autofit input size

by Eric Miller

SCSS

$base-font-sizing: 12px;
$padding: 8px;
$CH: 8px;
$CW: 9px;
$ratio: $CH / $CW;

@function em-to-px($em, $base: $base-font-sizing) {
    $px: strip-units($em) * strip-units($base);
    @return $px;
}

@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

@mixin input-size-minus-padding($size:1, $padding: $padding) {
  $px: em-to-px($size);
  $width: strip-units($px) - ( strip-units($padding) * 2 );
  @if ($width > $base-font-sizing){
    $width: $width;
  }
  @else {
    $width: strip-units($base-font-sizing);
  }
    
  input[size="#{$size}"],
  input.size-#{$size} {
    width: #{$width}px;
  }
}

input {
  text-align: center;
  padding: 4px 8px;
}

$i: 1;
@while $i <=10 {
  @include input-size-minus-padding($i, 4px);
  $i: $i + 1;
}

JavaScript

var maxSize = 10,
  $clone, val = '',
  $input = $('<input type="text" />');

for (var i = 1; i <= maxSize; i++) {
  val = '';
  for (var ii = 0; ii < i; ii++) {
    val += ii;
  }

  $clone = $input.clone().prop({
    size: i,
    value: val
  });

  $('body').append($clone).append($('<br />'));
}