javascript - 在文本字段中键入内容时，会自动从右向左格式化hh:mm

我正在尝试在用户在文本字段中键入内容时自动格式化hh：mm。最初是00:00，当用户输入前两个字符时，它应该填充分钟部分；键入第三和第四个字符时，它应该自动填充小时部分。我创建了一个自定义脚本，但似乎有一些错误。有人可以帮我解决这个问题吗？或者，如果有一些Jquery库，请建议我。我也尝试了输入掩码。但这没有我的要求。还需要光标应从右侧开始。
我的HTML如下

var num_order = "";
var last_input = "";
var length = 0;

var result_str = "00:00";

$('#price').bind('keydown', function(evt) {
  //alert(String.fromCharCode(evt.keyCode));
  length = num_order.length;

  if (length < 4) {
    if (evt.keyCode == 8) {
      num_order = num_order.substring(0, num_order.length - 1);
    } else {
      last_input = String.fromCharCode(evt.keyCode);

      if (last_input > 0) {
        num_order = num_order + last_input;
        //alert(num_order);
      } else {

      }
    }
  } else {
    if (evt.keyCode == 8) {
      num_order = num_order.substring(0, num_order.length - 1);
    }
  }
  //alert(num_order);
  var result = update_input(num_order);
  //$("#price").val("");
  $("#price").val(result);
});

var result = update_input(num_order);
//$("#price").val("");
$("#price").val(result);

function update_input(str) {
  length = str.length;
  if (length == 0) {
    result_str = "00:00";
  } else if (length == 1) {
    //alert(str);
    result_str = "00:0" + str;
    //alert(result_str);
  } else if (length == 2) {
    result_str = "00:" + str;
  } else if (length == 3) {
    var first2 = str.substring(0, 2);
    var last1 = str.substring(2, 3);
    result_str = "0" + last1 + ":" + first2;
  } else if (length == 4) {
    var first2 = str.substring(0, 2);
    var last2 = str.substring(2, 4);
    result_str = last2 + ":" + first2;
  }

  //$("#price").val("");
  //$("#price").val(result_str);
  return result_str;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="text" id="price" value="00:00" />

最佳答案

从验证截止开始，下面的示例显示了如何保持4位数字，首先是keydown并不是处理此数字的最佳位置

[编辑]但是，这可能会使您回到正轨（或可能不会回到正轨），但这不太可能成为您的最终解决方案，因为键控和键控之间存在故障，看起来并不好

$("#price").val('00:00'); // init

$('#price').bind('keyup',function(evt){
  let last_input= String.fromCharCode(evt.keyCode);
  console.log('new char: ' + last_input);
  let str = $('#price').val();
  console.log('before: ' + str); // char was already added
  str = str.replace(/:/, ''); // drop the colon
  console.log('without colon: ' + str);
  //str += last_input;
  if (str.length < 4) {
    str = '0000' + str; // fill zeros on front (cut excess below)
  }
  if (str.length > 4) {
    str = str.substring(str.length - 4, str.length); // drop front
  }
  console.log('about to insert colon: ' + str);
  str = str.substring(0, 2) + ':' + str.substring(2, 4);
  console.log('after: ' + str);
  $("#price").val(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="text" id="price" value="00:00" />

关于javascript - 在文本字段中键入内容时，会自动从右向左格式化hh:mm，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40418100/