入力をページの他の部分にバインドし、ユーザーが入力したすべての空白を、たとえばアスタリスクなどの他の文字に置き換えたいと考えています。
私の(簡略化された)HTMLコードは次のようになります。
<div ng-app>
<div ng-controller="MyCtrl">
Output: "{{input}}"<br />
<input type="text" ng-model="rawInput" ng-change="onInputChanged()" />
</div>
</div>
関連するコントローラーも非常に単純です。
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.input = '';
$scope.rawInput = '';
$scope.onInputChanged = function() {
$scope.input= $scope.rawInput .replace(/\s/g, '*');
};
};
結果は期待どおりではありません。テキストボックスに入る'Hello '
と、結果の出力は"Hello"
末尾の空白が削除されたものになります。入力の末尾にある複数の空白についても同じことが言えます。
のように空白以外の文字を入力に追加する'Hello W'
と、空白は適切に置き換えられて表示されます: "Hello*World"
.
だからここに私の質問があります:ユーザーが入力したすべての空白を保持するテキストボックスの値にバインドするにはどうすればよいですか?
この問題を示すJSFiddleを作成しました。