Bootstrap4 IP輸入組件

前言

IP輸入組件的功能包括：

1. 輸入 3 個字符自動跳到下一個輸入框內（data-letterlimit可以修改字符限制，比如MAC地址的輸入框則改成2，下面有例子）
2. 輸入↓或→鍵自動跳到下一個輸入框內
3. 輸入↓或→鍵自動跳到上一個輸入框內
4. 刪除的時候，一個輸入框沒有了字符，自動跳回上一個輸入框
5. focus輸入框，自動選中所有文本

效果如下：

依賴

1. 先引入bootstrap4的css
2. 引入jquery.js

CSS

/*ip-input-group*/
.ip-input-group { width: 100%; }
.ip-input-group-w { background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; width: 100%; border-radius: 2px; }
.ip-input-group.focus .ip-input-group-w { color: #495057; background-color: #fff !important; border-color: #059ce6; outline: 0; box-shadow: none; }
.ip-input-group .ip-input-group-input { }
.ip-input-group .ip-input-group-input input.form-control { background-color: transparent; border: 1px solid transparent; width: 100%; text-align: center; padding: 2px 5px; }
.ip-input-group .ip-input-group-input input.form-control.focus{ background-color: #f4f4f4 !important; }
.ip-input-group-span { padding: 0 4px; color: #888; }

JS

// ip輸入器組件(繼承bootstrap的樣式)
$('[data-plugin="ipinput"]').each(function(){
  var elem = $(this);
  var inputs = elem.find('input');
  var len = inputs.length;
  var letter_limit = parseInt(elem.attr('data-letterlimit'));
  if(!letter_limit){ letter_limit = 3; }
  elem.find('input').each(function(index, item){
    var $item = $(item);
    $item.on('focus', function(){
      if($(this).val()!=''){
        $(this).select();
      }
      elem.addClass('focus');
      $(this).addClass('focus');
    });
    $item.on('blur', function(){
      elem.removeClass('focus');
      $(this).removeClass('focus');
    });
    $item.on('keyup', function(e){
      var thisinput = $(this);
      var v = $(this).val();
      // 輸入↓或→鍵自動跳到下一個輸入框內
      if( (e.keyCode == 39 || e.keyCode == 40) && index<len-1){
        inputs.eq(index+1).focus();
      }
      // 輸入↓或→鍵自動跳到上一個輸入框內
      else if( (e.keyCode == 38 || e.keyCode == 37) && index!=0){
        inputs.eq(index-1).focus();
      }
      // 輸入3個字符自動跳到下一個輸入框內
      else if(v.length == letter_limit && index<len-1){
        inputs.eq(index+1).focus();
      }
      // 刪除的時候，一個輸入框沒有了字符，自動跳回上一個輸入框
      else if(v == '' && e.keyCode == 8 && index!=0){
        inputs.eq(index-1).focus();
      }
    });
  })
});

HTML

最基本的IP輸入組件：

<!-- IP輸入組件 開始 -->
<div class="ip-input-group" data-plugin="ipinput">
    <div class="ip-input-group-w d-flex">
        <div class="ip-input-group-input flex-fill"><input type="text" class="form-control form-control-sm"></div>
        <div class="ip-input-group-span">:</div>
        <div class="ip-input-group-input flex-fill"><input type="text" class="form-control form-control-sm"></div>
        <div class="ip-input-group-span">:</div>
        <div class="ip-input-group-input flex-fill"><input type="text" class="form-control form-control-sm"></div>
    </div>
</div>
<!-- IP輸入組件 結束 -->

MAC地址輸入組件：

<!-- IP輸入組件 開始 -->
<div class="ip-input-group" data-plugin="ipinput" data-letterlimit="2">
    <div class="ip-input-group-w d-flex">
        <div class="ip-input-group-input flex-fill"><input type="text" class="form-control form-control-sm" value="09"></div>
        <div class="ip-input-group-span">-</div>
        <div class="ip-input-group-input flex-fill"><input type="text" class="form-control form-control-sm" value="90"></div>
        <div class="ip-input-group-span">-</div>
        <div class="ip-input-group-input flex-fill"><input type="text" class="form-control form-control-sm" value="90"></div>
        <div class="ip-input-group-span">-</div>
        <div class="ip-input-group-input flex-fill"><input type="text" class="form-control form-control-sm" value="90"></div>
        <div class="ip-input-group-span">-</div>
        <div class="ip-input-group-input flex-fill"><input type="text" class="form-control form-control-sm" value="90"></div>
        <div class="ip-input-group-span">-</div>
        <div class="ip-input-group-input flex-fill"><input type="text" class="form-control form-control-sm" value="d9"></div>
    </div>
</div>
<!-- IP輸入組件 結束 -->

data-plugin="ipinput"：激活功能

data-letterlimit="2"：修改字符長度限制，每個輸入框達到這個長度，則自動跳到下一個框（如果有下一個框）

手動增加. ip-input-group-input的個數