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

2017年9月1日金曜日

javascript

t f B! P L


HTMLJavaScriptで作る、マスク入力(補助)部品について、考えてみた。

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

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




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

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

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









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


スポンサーリンク

QooQ