我想創建一個html5輸入，看起來像iOS輸入引腳(在鎖定屏幕上)....有4個輸入框。

我如何實現這一點？

我嘗試了以下方法:

1)創建了一個普通的輸入框。

2)移除其邊框。

3)放置上圖作為輸入框的背景。

4)并增加了一些字母間距。

問題是:當我鍵入前3個字符時，它適合這些框:

但是當我輸入第四個字符時，這些字符向左移動，因此顯示如下:

我能做什么來解決這個問題？

有其他更好的方法嗎？？

編輯:

好的，基于下面的回答，我修改了方法，增加了4個輸入框。對于每個輸入框的keyup事件，我將焦點轉移到下一個輸入框。

這在瀏覽器上運行良好。但是在設備(iPhone 5)上不工作。有什么問題？

這是一個使用Cordova打包的Sencha Touch應用程序。

已解決:

需要禁用& ltpreference name = " keyboard display requires user action " value = " false "/& gt；

代替圖像，有4個輸入框。小提琴在這里:http://jsfiddle.net/JLyn9/2/

<input type="password" maxlength=1 id="1" onkeyup="moveOnMax(this,'a')" />
<input type="password" maxlength=1 id="a" onkeyup="moveOnMax(this,'b')" />
<input type="password" maxlength=1 id="b" onkeyup="moveOnMax(this,'c')" />
<input type="password" maxlength=1 id="c" />

moveOnMax =function (field, nextFieldID) {
    if (field.value.length == 1) {
        document.getElementById(nextFieldID).focus();
    }
}

PS JS函數可以優化。

編輯/警告:這不是解決這個問題的方法。請看其他答案

為了這個目，不要使用背景圖像，使用四個類型設置為密碼的輸入框，然后使用jQuery來實現更好的用戶友好性，如果您不需要自動聚焦到下一個字段的功能，您可以簡單地省略腳本并實現您的風格..

演示

input[type=password] {
    padding: 10px;
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
}

jQuery(自動聚焦功能可選)

$("input").keyup(function() {
    if($(this).val().length >= 1) {
      var input_flds = $(this).closest('form').find(':input');
      input_flds.eq(input_flds.index(this) + 1).focus();
    }
});

不需要jQuery，干凈多了。

超文本標記語言

<form id="ios">
    <input type="password" maxlength="1" />
    <input type="password" maxlength="1"/>
    <input type="password" maxlength="1"/>
    <input type="password" maxlength="1"/>
</form>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

form#ios input[type=password]{
    height: 50px;
    width: 40px;
    text-align: center;
    font-size: 2em;
    border: 1px solid #000;
}

演示 http://jsfiddle.net/jerryhuangme/e9yhr/

為了保持風格的整潔， 我建議你創建4個輸入框。

編寫一個小腳本，當用戶在當前輸入框中輸入字符時聚焦下一個輸入框。

$("input[name*=pin]").keyup(function(e) {
  if($(this).val().length == 1) {
    $(this).attr('type', 'password');
    var input_fields = $(this).closest('form').find('input[name*=pin]');
    input_fields.eq(input_fields.index(this) + 1).focus();
  }
  if (e.keyCode==8 && e.currentTarget.name !== 'pin01') {
    $(this).attr('type', 'number');
    var input_fields = $(this).closest('form').find('input[name*=pin]');
    input_fields.eq( input_fields.index(this) - 1 ).attr('type', 'number').focus(); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form action="" class="form-pin">
  <input type="number" maxlength="1" name="pin01" class="input-pin" pattern="\d*" />
  <input type="number" maxlength="1" name="pin02" class="input-pin" pattern="\d*" />
  <input type="number" maxlength="1" name="pin03" class="input-pin" pattern="\d*" />
  <input type="number" maxlength="1" name="pin04" class="input-pin" pattern="\d*" />
</form>

我看到了所有的答案，但沒有一個能解決點擊退格鍵時的問題，

為了解決這個問題，我有一個解決方案，

HTML:

<input class="input" type="text" id="input-1" maxlength=1 data-id="1" />
        <input class="input" type="text" id="input-2" maxlength=1 data-id="2" />
        <input class="input" type="text" id="input-3" maxlength=1 data-id="3" />
        <input class="input" type="text" id="input-4" maxlength=1 data-id="4" />

CSS:

.input {
    padding: 0.8rem;
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
    margin-left: 1rem;
  }

Javascript:

const loginInputs = document.querySelectorAll(".input");

loginInputs.forEach((el) => {
  el.addEventListener("keyup", (e) => {
    const id = +e.target.dataset.id;
    if (e.key === "Backspace") {
      if (id === 1) return;
      const prevEl = document.getElementById(`input-${id - 1}`);
      prevEl.focus();
    } else {
      if (id === 4) return;
      const nextEl = document.getElementById(`input-${id + 1}`);
      nextEl.focus();
    }
  });
});

不需要JS。 這個解決方案涵蓋了回空格，復制/粘貼等，只使用html和CSS。

如果在輸入第四個數字時，輸入字段中的數字向右移動，這可能是由于某些web瀏覽器的默認行為將輸入字段中的字符顯示為星號或項目符號。這種行為會導致輸入文本向右移動。

要解決這個問題，您可以修改元素以使用固定寬度的字體。這確保了每個字符占據相同的空間，防止了移位效應。您可以對輸入字段應用CSS樣式來實現這一點:

& lt輸入類型= & quot文本& quotid = & quotpin輸入& quotmaxlength = & quot4 & quotstyle = & quot字體系列:等寬；"& gt

完整的html組件:

<div id="pin-container">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <label for="pin-number" class="sr-only">PIN</label>
          <input type="password" name="pin-number" id="pin-number" maxlength="4" style="font-family: monospace;">
        </div>

<style>
  #pin-container {
    display: inline-block;
    position: relative;
  }
  #pin-container div {
    background-color: #F2F2F2;
    border: 2px solid #222;
    border-radius: 7px;
    float: left;
    height: 3em;
    margin-right: 0.25em;
    width: 3em;
  }
  #pin-number {
    background-color: transparent;
    border: none;
    bottom: 1.1em;
    /* font-family: monospace; <-- here or inline html */
    font-size: 1.9em;
    left: 0.8em;
    letter-spacing: 1.64em;
    outline: none;
    position: absolute;
  }
</style>