4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

Organization

Vue.jsでinputフォームの文字数制限をする

今回のゴール

  • Vue.jsで実装するinputフォームで入力できる文字数を制限し、特定の文字数以上は入力できないようにする

実際のコード

サンプル

CodeSandboxに実際に動くもの作りました。
https://codesandbox.io/s/input-form-chara-limit-o9qp1?fontsize=14&hidenavigation=1&theme=dark

<template>
  <div id="app">
    <p>5文字以上入力ができないinputフォーム</p>
    <input type="text" v-model="inputText">
    <p>{{ inputText }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      inputText: ""
    };
  },
  watch: {
    inputText(inputText) {
      this.inputText = this.charaLimit(inputText);
    }
  },
  methods: {
    charaLimit(inputText) {
      return inputText.length > 5 ? inputText.slice(0, -1) : inputText;
    }
  }
};
</script>

watchによってv-modelで文字列inputTextが新しく入力された時に、methodのcharaLimitが動くようにします。
cahraLimmitではinputTextが5文字より多い場合は文字列の末尾を削除し、そうでなければ入力された文字列をそのまま
returnしてinputTextに代入するようにします。

inputTextが入力される度に文字列の末尾を削除するので実質的に、文字列が5文字より多い場合はinputTextに値が入らなくなります。

所感

入力された文字のバリデーションは正規表現に任して、入力文字数はsliceで対応すると簡単でした。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?