javascript - 在每 2 位后输入 mac 地址时自动插入冒号

Question

我想使用 Java Script 或 jquery 在 html 输入框中的每 2 位数字后自动插入冒号。

我按下了

00 然后像 00 一样自动插入冒号：

继续继续最多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

您可以使用模数来做到这一点

你可以试试这样的

例如：

尝试这个：

var length = 1;
$("#input").focusin(function (evt) {

    $(this).keypress(function () {
        var content = $(this).val();
        var content1 = content.replace(/\:/g, '');
        length = content1.length;
        if(((length % 2) == 0) && length < 10 && length > 1){
            $('#input').val($('#input').val() + ':');
        }    
    });    
});

http://jsfiddle.net/3NLDL/1/

Answer 3

这是我的版本：

$('#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);
});

它还每两个字符添加“：”。

国际文凭

Answer 4

改进了这个答案。 答案有很多缺陷。

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 个并删除每个超出限制的字符。它还会:在每个第二个字符后添加一个冒号。

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

我正在使用它并为我工作：

<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 7

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));
    }
});