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

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

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

它还增加了＆＃34;：＆＃34;每两个字符。

IngD

Answer 4

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

Answer 5

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

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

对此answer进行了改进。 答案有很多缺陷。

没有意义的变量名
乱码
过时的方法

这里是demo.

$("#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 7

如果有人在这里找到方法，我发现上述答案有很多问题，因此我在这里添加了自己的答案。我的标准如下：

能够发送垃圾邮件（快速键入）字母和数字，并且仍然在正确的位置插入冒号
没有幻像字符（某些字母会在拼接后显示然后消失）
能够在任意位置退格（某些答案，退格会破坏格式）
降低了复杂性
没有正则表达式
不超过17个字符

最初，我是用Vue编写的，但是在这里我将提供一个jQuery版本。

--delta

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

每2位数后输入mac地址时自动插入冒号

7 个答案: