データ入力時に "text"タイプの入力を変更するにはどうすればよいですか？ことができますよう</p> <pre><code><input type='text' placeholder='Phone number'> </code></pre> <p>シンプル：

Question

は、だから私は、次の入力を持っています。私が望むのは、その特定のボックスに焦点が当てられたときは常に、そのボックスがどのようにデータを受け入れるのかをユーザーが助けるためにあらかじめ決められたパターンが表示されるということです。

：ユーザーが任意の7つの初期の数値を入力したときに、それはこのように表示したい

（__）____-____

：私はそれを表示する方法は、このようなものです入力する必要なしにユーザ___

（21）3322から1「（」、「）」、または「 - 」、それは既に正しい場所にされるので、ユーザはnumbeを入力している間r。

ボックスが10桁（最初は2つ、その後は4つ）を受け入れると、入力ボックスはデータの受信を停止します（これはmaxlength = '10 'で行うことができるため問題ありません） 。データがボックス内にされていない場合は、htmlファイルの定期的なプレースホルダを表示するために戻って行くだろう：

電話番号

誰もがこれを行う方法を教えている場合、私は喜んでいるだろう。助けてくれる人には、事前に感謝します。

Answer 1

入力をまとめてグループ化し、入力の最大長に達した場合は、次のグループに焦点を当てるのはどうですか？この質問への回答に基づいて

let container = document.querySelector('.phone-input'); 
 

 
container.addEventListener('input', event => { 
 
    let input = event.target; 
 
    if (input.value.length >= input.attributes['maxlength'].value) { 
 
    while ((input = input.nextElementSibling) !== null) { 
 
     if (input.tagName === 'INPUT') { 
 
     input.focus(); 
 
     break; 
 
     } 
 
    } 
 
    } 
 
});

<div class="phone-input"> 
 
(<input type="text" maxlength="2" size="2">) 
 
    <input type="text" maxlength="4" size="4"> - 
 
    <input type="text" maxlength="4" size="4"> 
 
</div>

実装：Focus next input once reaching maxlength value