HTML inputタグ ハイフン 自動入力

Question

マイナンバーカードのような個人の番号に対して
４桁ごとに自動でハイフン（"-"）を入力できるようにさせたいと考えています。
またtypeをPasswordにした際に
表示が（●）に変換されますが、
これを（＊）にへんこうすることは可能でしょうか＞

<input type="Password" maxLength="12"></input>

＜実装前＞
●●●●●●●●●●●●

＜実装後＞
●●●●-●●●●-●●●●

Comments

[K_3578]

よろしくおねがいします言われても作業依頼を無償でやってくれるサイトじゃないので。

まぁやるならJavaScriptとか使わないと無理じゃないかなー。

[m.ts10806]

要件固まってるならまず自ら実装するところからです。

[m.ts10806]

細かいですがinputタグに閉じは不要です。本来つけていたタグもなくてよくなっているものもあります。https://agohack.com/html-closetags/

Answer 1

４桁ごとに自動でハイフン（"-"）を入力できるようにさせたいと考えています。
<input type="Password" maxLength="12"></input>

<input type="password">の中身を自動で加工すると、入力した当人が加工の事実に気づけないためにトラブルとなります。

よほどの理由がある場合を除いて、やるべきではありません。

Comments

[maisumakun]

> ●●●●-●●●●-●●●●

標準の<input type="password">でこんなことはできません。●●●●●●●●●●●●●●と文字が増えるだけになります。

Answer 2

すでに回答があるとおりpasswordの入力変換処理は危険なのでやめてください
（整合性チェックはOK）

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const inp=document.querySelector('#inp');
  inp.addEventListener('focus',()=>{
    inp.value=inp.value.replace(/-/g,'');
  });
  inp.addEventListener('blur',()=>{
    var reg=/^(\d{4})(\d{4})(\d{4})$/;
    if(reg.test(inp.value)){
      inp.value=inp.value.replace(reg,"$1-$2-$3");
    }
  });
});
</script>
<input type="text" id="inp" pattern="\d{4}(-?\d{4}){2}">

Answer 3

入力しながら勝手にハイフンがつくのは個人的には使いやすいとは思わないので別のやり方を検討したいところ。

• 入力をハイフンが必要な個数-1 （例示なら3つ）に分けて受け取って表示時にハイフンを補完する
• 入力時はハイフンつけずに入力させて表示時にハイフンつけて出す

一つのやり方として参考まで。

ただ、要件次第です。
ハイフンで分けられた4桁の数字それぞれに意味があるのでしたら前者のほうが利用者としては視覚的に意識できますし、システム側の入力チェックの都合もいいかもしれません。

あくまで「ような」のようですし、チェックディジットまでは気にしなくていいんですかね。

Comments

[m.ts10806]

passwordならなおさら。入力しながらつけるのはNG

Answer 4

既に自動でハイフン付けることの危険性に関しては回答付いているので追加要件のみ回答

またtypeをPasswordにした際に
表示が（●）に変換されますが、
これを（＊）にへんこうすることは可能でしょうか＞

input type=passwordのマスク（黒丸）をアスタリスクに変更したい　-teratail
ほぼ同じ内容の質問で追記修正依頼欄含め色々検討しましたが、基本的に不可能です。

無理矢理再現できる方法はあるかも知れませんが荒業なので何かしら不具合起こる可能性は大いにあります。