使輸入字段中的前導和尾隨空格可見

Question

在用於過濾的輸入字段中，我想尊重前導和尾隨空格，因為它們是相關的。 在 angularjs 中，這很容易用ng-trim=false ，但是我怎樣才能讓它們可見，這樣用戶就不會被遺忘的空間弄糊塗了？

說明：

尾隨空格顯然與過濾相關，因為"in "與"input"不匹配，而普通的"in"匹配。

輸入字段中的尾隨空格是不可見的，因為您很容易發現。 我想要文本部分的彩色背景或任何其他不太侵入性的突出顯示方式。

Answer 1

您可以將不同樣式的 div 並排保存在由透明輸入重疊的容器中。 根據您的輸入條目修改樣式 div 的寬度。

<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>

容器內的三個 div 將隨着輸入的變化而改變它們的寬度，您可以為前導空格和尾隨空格對 div 着色。

jsfiddle 中的工作 Angular 示例： http : //jsfiddle.net/TalhaAwan/8b3xzd38/ （僅使用 chrome 測試）