Question

我希望有一个接受HH：MM（小时/分钟）格式的文本框。因此，当用户输入HH的值时，它应该在此之后自动插入冒号并让用户输入MM的值。

我不想为此使用任何插件。

我该怎么做？

感谢

Answer 1

如果您有多个输入

<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>
<input class="test-input" placeholder="hh:mm" value=""/>

Jquery版本：

$(document).on('ready',function(){
      $('.test-input').on('keyup',keyUpHandler);
});


    function keyUpHandler(e){  
        var element = this;
        var key = e.keyCode || e.which;   
        insertTimingColor(element,key)
    }

    function insertTimingColor(element,key){
        var inputValue = element.value;
        if(element.value.trim().length == 2 && key !== 8){
            element.value = element.value + ':';
        }
    }

fiddle - jquery

Vanilla JS版

document.body.addEventListener('keyup',keyUpHandler,false);

function keyUpHandler(e){  
    var evt = e || window.event;
    var target = evt.target || evt.srcElement;
    var key = e.keyCode || e.which;   

    //check if it is our required input with class test input
    if(target.className.indexOf('test-input') > -1){
        insertTimingColor(target,key)
    }

}

function insertTimingColor(element,key){
    var inputValue = element.value;
    if(element.value.trim().length == 2 && key !== 8){
        element.value = element.value + ':';
    }
}

<强> fiddle - js

Answer 2

$('id or class or parent id').on('keypress','class or id', function (e){
    var key = e.keyCode || e.which;
            if(this.value.trim().length == 2 && key !==8  && this.value.search
    (':') != -1)
        this.value = this.value + ':';
});

    $('id or class or parent id').on('keyup click','class or id', function (e){

    if(this.value.length >= 3)
        this.selectionStart = this.selectionEnd = this.value.length;

});
$('id or class or parent id').on('paste','class or id', function (e){
    e.preventDefault();

});

Answer 3

试试吧。

jQuery("#textboxId").keypress(function(){
       if(jQuery("#textboxId").val().length)==2{
          var value=jQuery("#textboxId").val();
          jQuery("#textboxId").val(value+":");
       }
    });

Answer 4

请尝试以下代码：

HTML：

<input type="text" id = "timeInput" maxlength = 14>

使用Javascript：

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

DEMO

Answer 5

$(document).ready(function() {
  var global_flag = true;
  $("#texboxId").on('keyup', function() {
    var cur_val = $(this).val();
    var cur_length = cur_val.length;
    var flag = true;
    if (cur_length > 5) {
      cur_val = cur_val.substring(0, 5);
      $(this).val(cur_val);
    } else {
      if (cur_length > 2) {
        global_flag = false;
      } else if (global_flag == false && cur_length < 2) {
        global_flag = true;
      }
      if (cur_length == 2 && global_flag) {
        if (window.event.keyCode != 8) {
          $(this).val(cur_val + ":");
        }
      }
      if (cur_length == 5) {
        if (cur_val.match(/^(([0-1][0-9]){0,2}|(2[0-3]){0,2}){0,2}:([0-5][0-9]){0,2}$/)) {} else {
          $(this).val("");
          $(this).attr('placeholder', "HH:MM");

        }
      }

    }

  });
});

Answer 6

下面的代码可以帮到你。现在您需要做的就是添加一些验证，例如只允许数字键按下值。

<input id="time-input" placeholder="hh:mm"  type="text">

$(document).ready(function(){
    $("#time-input").keypress(function(){
       $this = $(this);       
       if($this.val().length == 2){
           $this.val($this.val() + ":");
       }
    });
});

http://jsfiddle.net/g9nahpax/

jquery-输入2位数字后如何自动插入冒号

6 个答案: