javascript - 各 2 桁の後に MAC アドレスを入力する際に​​コロンを自動挿入

Question

Java Scriptまたはjqueryを使用して、html入力ボックスの2桁ごとにコロンを自動挿入したい。

私は押した

00 次に、00 のようなコロンを自動的に挿入します。

keep on 5回まで続ける

00:00:00:00:00:00

Answer 1

これを試して

<div id="dialog-message" title="Enter MAC address">
    <input id="macAddress" type="text" maxlength="17"></input>
</div>

var macAddress = $("#macAddress");

$(function () {
    $("#dialog-message").dialog({
        modal: true,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
                alert("MAc address entered: " + macAddress.val());
            }
        }
    });
});

function formatMAC(e) {
    var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
        str = e.target.value.replace(/[^a-f0-9]/ig, "");

    while (r.test(str)) {
        str = str.replace(r, '$1' + ':' + '$2');
    }

    e.target.value = str.slice(0, 17);
};

macAddress.on("keyup", formatMAC);

jsfiddleで

ここでは、jquery の付加機能を使用せずに、純粋な JavaScript で同じことを行います。

<input id="macAddress" type="text" maxlength="17"></input>

var macAddress = document.getElementById("macAddress");

function formatMAC(e) {
    var r = /([a-f0-9]{2})([a-f0-9]{2})/i,
        str = e.target.value.replace(/[^a-f0-9]/ig, "");

    while (r.test(str)) {
        str = str.replace(r, '$1' + ':' + '$2');
    }

    e.target.value = str.slice(0, 17);
};

macAddress.addEventListener("keyup", formatMAC, false);

jsfiddleで

Answer 2

これは私のバージョンです：

$('#MACADDRESS').keyup(function (e) {
  var r = /([a-f0-9]{2})/i;
  var str = e.target.value.replace(/[^a-f0-9:]/ig, "");
  if (e.keyCode != 8 && r.test(str.slice(-2))) {
    str = str.concat(':')
  }
  e.target.value = str.slice(0, 17);
});

また、2 文字ごとに「:」を追加します。

イングディ

Answer 3

この回答を改善しました。 答えには多くの欠陥がありました。

1. 意味をなさない変数名
2. 乱雑なコード
3. 時代遅れの方法

これがデモです。

$("#mac").on("keyup", function(event) {

  var limitField = $(this).val().trim().length;
  var limit = "17";

  if (event.keyCode != 8) {
      var mac_value = $(this).val().trim().concat(':');
      switch(limitField) {
          case 2:
          case 5:
          case 8:
          case 11:
          case 14:
              $("#mac").val(mac_value);
          break;
      }
   }
   if (limitField > limit) {
       $("#mac").val($(this).val().trim().substring(0, limit));
   }
});

これにより、最大文字数が 17 に制限され、制限を超えるすべての文字が削除されます。また、:2 文字ごとにコロンが追加されます。

Answer 4

私はこれを使用しており、私のために働いています:

<input type="text" id="macaddress" onkeyup="doInsert(this)" maxlength="17"/>

<script type="text/javascript">
function doInsert(ctl)
{
    vInit = ctl.value;
    ctl.value = ctl.value.replace(/[^a-f0-9:]/ig, "");
    //ctl.value = ctl.value.replace(/:\s*$/, "");
    vCurrent = ctl.value;
    if(vInit != vCurrent)
        return false;   

    var v = ctl.value;
    var l = v.length;
    var lMax = 17;

    if(l >= lMax)
    {
        return false;
    }

    if(l >= 2 && l < lMax)
    {
        var v1 = v;     
        /* Removing all ':' to calculate get actaul text */
        while(!(v1.indexOf(":") < 0)) { // Better use RegEx
            v1 = v1.replace(":", "");           console.log('v1:'+v1);
        }

        /* Insert ':' after ever 2 chars */     
        var arrv1 = v1.match(/.{1,2}/g); // ["ab", "dc","a"]        
        ctl.value = arrv1.join(":");
    }
}
</script>

Answer 5

誰かがここに道を見つけた場合、上記の回答で多くの問題を見つけたので、ここに自分自身を追加しています。私の基準は次のとおりでした。

• 文字や数字をスパム (すばやく入力) しても、正しい位置にコロンを挿入できる
• 幻の文字はありません (手紙にいくつかの答えが表示され、つなぎ合わせると消えてしまいます)
• 任意の位置でバックスペースできます (いくつかの回答、バックスペースは書式設定を台無しにします)
• 複雑さの軽減
• 正規表現なし
• 17文字以内

もともとこれは Vue で書いたものですが、ここでは jquery バージョンを提供します。

$("#mac-input").on("keydown", function(event) {
  const BACKSPACE_KEY = 8
  const COLON_KEY = 186
  const _colonPositions = [2, 5, 8, 11, 14]
  const _newValue = $(this).val().trim()
  const _currentPosition = _newValue.length
  if (event.keyCode === COLON_KEY) {
    event.preventDefault()
  }
  if (event.keyCode !== BACKSPACE_KEY) {
    if (_colonPositions.some(position => position === _currentPosition)) {
      $("#mac-input").val(_newValue.concat(':'))
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="mac-input" maxlength="17" />

Answer 6

Mayur 私の例を参照してください

http://jsfiddle.net/X5r8r/1167/

<input type="text" id="ip_address"/>

$("#ip_address").live("keyup", function(event) {
    var limitField = $(this).val().trim().length;
    var limit = "14"    
    if (event.keyCode != 8) {
      if (limitField == 2) {
          var fax_value = $(this).val().trim().concat(':');
        $("#ip_address").val(fax_value);
      } else if (limitField == 5) {
          var fax_value = $(this).val().trim().concat(':');
        $("#ip_address").val(fax_value);
      }else if (limitField == 8) {
          var fax_value = $(this).val().trim().concat(':');
        $("#ip_address").val(fax_value);
      }else if (limitField == 11) {
          var fax_value = $(this).val().trim().concat(':');
        $("#ip_address").val(fax_value);
      }
    }
    if (limitField > limit) {
        $("#ip_address").val($(this).val().trim().substring(0, limit));
    }
});