Make leading and trailing spaces in an input field visible

In an input field used for filtering, I want to honor leading and trailing spaces as they're relevant. In angularjs, this is easily done with ng-trim=false, but how can I make them visible, so that the user doesn't get confused by a forgotten space?

Explanations:

Trailing spaces are obviously relevant for filtering as "in " doesn't match the "input", while plain "in" does.

A trailing space in an input field is invisible as you can easily find out. I'd like something like colored background for the text part or any other not too intrusive way of highlighting.

You can keep differently styled divs side by side in a container overlapped by a transparent input. Modify the widths of the styled divs on the basis of your input entry.

<div ng-app="inputFormatApp" ng-controller="InputFormatCtrl">
  <div class="bckg-container">
    <div class="bckg spaces" ng-style="input.leadingSpaces">
    </div>
    <div class="bckg" ng-style="input.middleContent">
    </div>
    <div class="bckg spaces" ng-style="input.trailingSpaces">
    </div>
    <br style="clear: left;" />
  </div>
  <input id="inpt" type="text" ng-model="input.text" ng-trim="false" placeholder="Add leading/trailing spaces" ng-change="inputChanged()" maxlength="20" />
</div>

The three divs inside the container will change their width with input change and you can color the divs for leading and trailing spaces differently.

Working Angular example in jsfiddle: http://jsfiddle.net/TalhaAwan/8b3xzd38/ (tested with chrome only)