（JavaScript）マスク（入力補助）付きテキスト入力（自作構想）

HTML、JavaScriptで作る、マスク入力（補助）部品について、考えてみた。

Webで マスク入力を実現する場合、
以前、こちらの記事 で紹介、jquery.Inputmask というライブラリが有名です。

このライブラリは、
以下ののイメージのように、
テキストボックスのフォーカス状態と
入力状態を見ながら、
テキストボックス(inputタグ)のvalue プロパティに、
マスク文字または入力値を設定している。


最近のangular.js、vue.jsなどの
JSフレームワークは、
双方向データバインドが出来るため、
　以下のような問題が発生する。

• ソースとなる Model側のプロパティが
  頻繁に更新される。、
• "_"(アンダースコア)などの、
  入力補助用のマスク文字が、モデルに連携されてしまう。　

なので、以下のように Canvasタグ、Data URIでマスク文字列を、
背景画像として描画すれば、angular.js、vue.jsでも問題ないと思った。









作るのに、時間がかかりそう。。。。