Tech Racho エンジニアの「?」を「!」に。
  • 開発

Vue.jsサンプルコード(29)フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える

29. フィールドごとに全角英数字入力と半角英数字入力を自動で切り替える

  • Vue.jsバージョン: 2.5.2
  • [全角]フィールドに入力する英数字は全角に、[半角]フィールドに入力する英数字は半角になります。
  • 日本語入力には影響しません。
  • 画面をリロードすると最初の状態に戻ります。

サンプルコード

ポイント

watchで変数の変更を監視しています。watchの内部で変数をさらに変更しても無限ループになりません。

  const vm = new Vue({
    el: "#app",
    data: {a: "", b: ""},
    watch: {
      a: function(v) {
        this.a = v.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) + 65248) })
      },
      b: function(v) {
        this.b = v.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 65248) })
      },
    },
  })

バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。