モバイル側開発inputラベル呼び出しデジタルキーボード

2480 ワード

コードを先に入力:
 6)value=value.slice(0,6)"/>

maxlength属性は入力内容の最大長を規定しており、typeをnumberに設定するとmaxlengthが失効するブラウザもあります.微信ブラウザは私がテストしたとき、まだこのような状況に遭遇していませんでした.万が一、私たちは以下のコードを追加することができます.
οninput="if(value.length>6)value=value.slice(0,6)" /* */

type=「text」とtype=「number」親測は、微信ブラウザios側でデジタルキーボードを呼び出すことができるが、アンドロイド側ではtype=「text」が一部の携帯電話に入力方式を持っていない.
開発の過程で私が最も厄介な問題に直面したのは、携帯電話のデジタルキーボードをどのように呼び出すかではなく、現在のこのinputをパスワードの用途として使用する場合、どのように入力した内容を「・」に変えるかであり、最後に、私はinputのtype属性を変えることで効果を実現することを選択し、oninputイベントを通じてトリガーし、inputに新しい内容が入力された場合、トリガーし、コードは以下の通りである.
  document.getElementById("pp").οninput=function(){
                 document.getElementById("pp").setAttribute("type", "password");
             };
しかし、入力が完了した後、inputを再クリックしたときに呼び出されたのは純粋なデジタルキーボードではありません.このとき、私たちのinput属性はpasswordになっていますが、上のコードの前にinputに対するfocusトリガイベントを追加して、inputの属性をnumberに変更してもいいですか?自分の何回かの実践を経て、inputラベルの属性がpasswordの場合、focusイベントやonclickイベントがトリガーされた場合、携帯電話のキーボードが呼び出されるため、inputの属性はpasswordである.
解決方法:
1つのdivで絶対位置決めまたは相対位置決めでinputを隠す(微信ブラウザがfloatで浮動するとクリックスルーイベントが発生しやすく、すなわち表層をクリックすると下層のクリックイベントがトリガーされる)ことは、input入力ボックスの上にカバーを追加することに相当する.この「カバー」のクリックによってinput属性を変更するイベントがトリガーされ、完全なコードは以下の通りです.
*
6)value=value.slice(0,6)"/>
document.getElementById("ppt").οnclick=function() { document.getElementById("pp").value=""; document.getElementById("pp").setAttribute("type", "number"); document.getElementById("pp").focus(); document.getElementById("pp").οninput=function(){ document.getElementById("pp").setAttribute("type", "password"); }; }; document.getElementById("pp").οnblur=function() { document.getElementById("pp").setAttribute("type", "password"); }