angularJSのng-changeでツイートの文字数制限とカウント

Level 2｜｜2016/08/02

ツイッター風の入力ボックスを実装します。通常、フォームでフリーで入力させるテキストエリアに文字数を制限したりしますが、今回はツイッターのような最大入力文字数を設定してカウントダウンさせ、入力された文字数によってテキストカラーを変更するテキストエリアを実装します。

まずは、全体の動きを確認

実際にサンプルを触ってみたい方はこちら

<form name="myForm" ng-submit="onsubmit()" novalidate>

<div>
    <label for="freetext">フリーテキスト：</label>
    <textarea id="memo" name="freetext" rows="5" cols="30"
      ng-model="freetext" ng-maxlength="10" required></textarea>
    <span ng-show="myForm.freetext.$error.maxlength">
      10文字以内で入力してください。</span>
</div>

<div>
    <label for="tweet">ツイート：</label>
    <textarea cols="70" rows="5" ng-model="tweet"
      ng-change="onchange()" required></textarea>
    <div ng-style="defColor">{{count}}</div>
</div>

</form>
            

上記サンプルの「フリーテキスト」は、文字数制限を実装しています。通常、というかラクな方法で、「ng-maxlength」属性を使って文字数を指定しています。
「ツイート」は、「ng-change」を使って、テキストエリアに入力されるごとにカウントダウンし、特定の文字数になったらテキストカラーを変更させています。
 
コードを見ると、「フリーテキスト」では文字数を「ng-maxlength」属性で制限していますが、「ツイート」は、「ng-change」「ng-style」を使用し、JS側で設定します。

文字数によって、テキストカラーを変更

    var max = 140;
    $scope.count = max;
    $scope.defColor = { color: 'blue' };

    $scope.onchange = function() {
      $scope.count = max - $scope.tweet.length;
      if ($scope.count > 10) {
        $scope.defColor = { color: 'green' };
      } else if ($scope.count > 0) {
        $scope.defColor = { color: 'red' };
      } else {
        $scope.defColor = { color: 'pink' };
      }
    };
            

まずは、カウント数を140にし「$scope.count」に、デフォルトのテキストカラーをブルーにし「$scope.defColor」に格納します。
 
次に、文字数によってテキストカラーを変更します。入力された文字数をリアルタイムで取得して、最大文字数140との差を「$scope.count」に格納します。
あとは、if関数を使って、「$scope.count」が10文字以上の場合はグリーン、10文字以下なら赤、マイナスになったらピンクに変わるように設定します。
これを↓

「ng-change」で入力値を取得・変更

<div>
    <label for="tweet">ツイート：</label>
    <textarea cols="70" rows="5" ng-model="tweet"
      ng-change="onchange()" required></textarea>
    <div ng-style="defColor">{{count}}</div>
</div>
            

<textarea ng-change="式">

「ng-change」属性は、入力値が変更された時に、式を実行します。
サンプルでは、JS側で先に説明したとおり、テキストエリアに入力された文字数を取得し、その数によって、カウントのテキストカラー「defColor」を変えています。スタイルを適用するには「ng-style」属性を使用します。