Vue.jsで簡単に文字数カウンターを実装する

Vue.jsで文字数カウンターの実装をする

背景

• テキスト（文字数）カウンターを実装する必要があった
• 工数はあまりかけられない
• Vue.jsの組み込みは任意で入れて良い条件

実装

Vue.jsバージョン

• Vueは<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> を使いました

フォーム設定

• フォームは<input v-model.trim="message" maxlength="20">と<textarea v-model.trim="message" maxlength="50"></textarea> の２点
• 最大文字数はブラウザの制御で持たせるためmaxlengthで制御しました
• trimを使うことで、冒頭と末尾のスペースが入力時点でトリミングされます。冒頭に半角スペースなどが入ってもカウント外になります。
• <p>{{ message.length }}/20</p> でタイムリーに入力文字数が表示されるようにしました
• フォームのユーザビリティとしては placeholder="50文字以内で入力してください" など入れておくと良いでしょう
  • placeholderの文字は入力時に消えてくれます
    

js

• js側はdata属性でmessage new Vue({ el: "#app", data: { message: "" }}); だけです。
• dataオブジェクトのmessageの値はカラにしておきます
• 冒頭文が決まっている場合など、data: { message: "例文:" } など予め文言を入れておく事も出来ます。
  • • placeholderと併用した場合、上記のVueの方が勝つようでplaceholderは機能しません

結果

See the Pen Vue.js Text Counter by Asagiri (@agdg) on CodePen.

注意点

• 改行はカウントされないが、空白やタブはカウントされるようです
• ↑ こちらVue.jsだけで解消される方法がありましたらご教示ください

参照