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

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

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

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

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

K_3578

2021/05/10 02:48 編集

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

m.ts10806

2021/05/10 02:57

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

m.ts10806

2021/05/10 03:04 編集

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

行動規範の内容に同意します

回答4件

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

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

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

投稿2021/05/10 02:57

maisumakun

総合スコア146018

maisumakun

2021/05/10 02:59 編集

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

行動規範の内容に同意します

ベストアンサー

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

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const inp=document.querySelector('#inp');
4  inp.addEventListener('focus',()=>{
5    inp.value=inp.value.replace(/-/g,'');
6  });
7  inp.addEventListener('blur',()=>{
8    var reg=/^(\d{4})(\d{4})(\d{4})$/;
9    if(reg.test(inp.value)){
10      inp.value=inp.value.replace(reg,"$1-$2-$3");
11    }
12  });
13});
14</script>
15<input type="text" id="inp" pattern="\d{4}(-?\d{4}){2}">
16