将时间分为0900至09:00

时间:2014-06-22 10:28:23

标签: javascript jquery time divide

如果我在此文本字段中输入0900,那么我希望它自动变成09:00

形式

<form action="form.html">
  <p>
    <label>time:</label>
    <input type="text" name="time" class="time"/>
  </p>
  <span id="error" class="hide">Error in the field</span>
</form>

我知道我应该使用以下内容来至少获取值,然后我必须将该值转换为我想要的值:

$(document).ready(function(){
  $(".time").on("focusout",function(){
    var old_value = $(this).val();

    // The old value to the new value
    if(old_value.length < 2 || > 4){
      $("#error").show();
    } else {
      if(old_value.length == 2){
        // Then add 2 leading zero's
        // Then add a : in the middle
      } else if (old_value.length == 3){
        // Then add 1 leading zero's
        // Then add a : in the middle
      } else if (old_value.length == 4){
        // Then add a : in the middle
      }
    }
  }

提前感谢您所做的努力。如果有什么不清楚,请问我。

3 个答案:

答案 0 :(得分:2)

使用此作为解决问题的基础:

$("#your_filed_id").on("focusout", function(){
    // Do whatever checking you like here 
});

答案 1 :(得分:1)

你可以这样做:

JsFiddle: http://jsfiddle.net/ha9kx/1/

<强> HTML:

<form action="demo_form.html">
    <p>
        <label>Hour:</label>
        <input type="text" name="hour" class="hour_modification"/>
    </p>
    <span id="error" class="hide">Error in the field</span>
</form>

<强> JavaScript的:

$(document).ready(function(){
    $(".hour_modification").on("focusout",function(){
        var old_val = $(this).val();
        if (old_val.length > 4 || old_val.length < 3){
            $("#error").show();
        }
        else{
            if(old_val.length = 3){old_val = "0" + old_val;}
            var new_val = old_val.substring(0,old_val.length-2) + ":" + old_val.substring(old_val.length-2);
            $(this).val(new_val);
        }
    });
});

即使用户将“300”设置为“03:00”

,此解决方案仍然有效

答案 2 :(得分:0)

如果输入的值总是以上面指定的格式为4个字符,则以下代码应该有效。我经常不使用jQuery,但以下内容应该让您了解所需内容。您可以使用jQuery和选择器修改事件侦听器。

http://jsfiddle.net/DS92Z/

<input type="text" id="time" />
<script>
   var input = document.getElementById('time');
   input.addEventListener('blur',function(e) {
      var target = e.target || e.srcElement;
      var value = target.value;
      if(value.length != 4) {
         return false;
      }
      target.value = value[0]+value[1]+':'+value[2]+value[3];
   },false);
</script>