Allow Backspace Time Format: Time Format javascript backspace

by: waf771Posted on 2009-10-30 at 17:30:22ID: 25707739

Oh, I forgot to mention, I am calling this function with the OnKeyUp attribute

by: ahoffmannPosted on 2009-10-31 at 07:15:34ID: 25709879

i.split(/[:\\]/);

by: HonorGodPosted on 2009-10-31 at 11:47:51ID: 25710981

The reason you are having trouble is that the routine is being invoked onkeyup.
For example, say the current value is "1" and we type "2". This routine changes the value to "12:". So, when we press the backspace, the ":" is deleted, and then immediately appended.

So, we need to have the routine know what kind of key was pressed. For a digit, we can execute the code above. For a tab, or alt-tab, we can validate the time, for an enter, we can validate the time, and for a backspace, we remove the last character.

Does that make sense?

<html>
<body> 
<script type='text/javascript'>
  function CheckTime( e ) {
    var key = ( document.all ) ? window.event.keyCode : e.keyCode;
    var TxtObj = document.getElementById( 'here' );
    var i = TxtObj.value;
    var n = parseInt(i);
    var o = TxtObj.value;
    
    if ( ( key > 47 ) && ( key < 58 ) ) {
      if ( i.length <= 2 ) {
        if ( n >=  3 && n <=  9 ) { o = '0' + n + ':'; }
        if ( n >= 24 && n <= 25 ) { o = '02:' + ( n - 20 ); }
        if ( n >= 26 && n <= 29 ) { o = '02:'; }
        if ( n >= 10 ) { o = i + ':'; }
      }
      if ( i.length >= 4 ) {
        var h = i.split(':')[0];
        var m = i.split(':')[1];
        if ( m.length == 1 && m >=6 ) { o = h + ':' }
      }
      TxtObj.value = o;
    }
  }
</script> 
</body>
  Time: <input type='text' id='here' onkeyup='CheckTime(event)'>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:

Select all Open in new window

by: kadabaPosted on 2009-11-01 at 19:36:59ID: 25716948

few flaws i see....

if the input is 24 say it will remain as 24 why?

if ( i.length <= 2 ) {
if ( n >= 3 && n <= 9 ) { o = '0' + n + ':'; }
if ( n >= 24 && n <= 25 ) { o = '02:' + ( n - 20 ); }// This is the condition it will satisfy! so it will be 02:4
if ( n >= 26 && n <= 29 ) { o = '02:'; }
if ( n >= 10 ) { o = i + ':'; }// but this will again satisfy so the result will be 24:
// for any number >=10 same thing will apply
}

next applying HonorGod's solution
you enter 12, it will get entered as 12:...
you hit a backspace it will be 12
next you enter 3 and then 4 it will be 1234, remember there is no semi colon
if ( i.length >= 4 ) {
var h = i.split(':')[0];
var m = i.split(':')[1];// you will probably encounter the error here...
if ( m.length == 1 && m >=6 ) { o = h + ':' }
}

so you need to refine the logic

by: kadabaPosted on 2009-11-01 at 20:00:25ID: 25717001

roughly...

<html>
<head>
<script type="text/javascript">
function CheckTime( e ) {
    var key = ( document.all ) ? window.event.keyCode : e.keyCode;
    var TxtObj = document.getElementById( 'here' );
    var i = TxtObj.value;
    var n = parseInt(i);
    var o = TxtObj.value;
    
    if ( ( key > 47 ) && ( key < 58 ) ) 
	{
      if ( i.length <= 2 ) 
	  {
		if(n>=3 && n<=9){o='0'+n+':';}
		if(n>=10 && n<=23){o=i+':';}
        if(n>=24 && n<=25){o='02:'+(n-20);}
        if(n>=26 && n<=29){o='02:';}
      }
	  if(i.length==3)
	  {
	    var temp;
	    var tempVal = o.substring(o.length - 1);
		if(tempVal == ":")
		{
			temp = '';	
		}
		else
		{
			temp = parseInt(tempVal,10);
		}
		
		// if entered as 129 it is invalid make ir 12:
		if(temp >= 6)
		{
			o = o.substring(0,o.length - 1) + ":";
		}
		// if entered as 125 it should be 12:5
		else
		{
			o = o.substring(0,o.length - 1) + ":" + temp;
		}	
	  }
      if ( i.length >= 4 ) 
	  {
        var h = i.split(':')[0];
        var m = i.split(':')[1];
        if ( m.length == 1 && m >=6 ) { o = h + ':' }
      }
      TxtObj.value = o;
    }
  }
</script>
</head>
<body> 
	 Time: <input type='text' id='here' onkeyup='CheckTime(event)' onkeypress='CheckTime(event)'>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:

Select all Open in new window

by: waf771Posted on 2009-11-02 at 10:11:14ID: 25721879

I think I figured it out. I also made it accept numbers from the number pad. Thank you.

function TimeFormat(TxtObj)
{
	if(TxtObj.value.length==4)
	{
		TxtObj.value=TxtObj.value.substr(0,2)+':'+TxtObj.value.substr(2,3);
	}
}
 
var OldTxt = new Array;
function CheckTime(e,TxtObj)
{
	var key = ( document.all ) ? window.event.keyCode : e.keyCode;
	var i = TxtObj.value; if(i.length==null){return false}
	var n = parseInt(i);
	var o = TxtObj.value;
	if (OldTxt[TxtObj.id]==null){OldTxt[TxtObj.id]=''}
	if (OldTxt[TxtObj.id]==undefined){OldTxt[TxtObj.id]=''}
	
	if (( (key>47)&&(key<58) ) || ( (key>=96)&&(key<=105) ))
	{
		if(i.length<=2)
		{
			if(n>=3 && n<=9){o='0'+n+':'  ;}
			if(n>=10){o=i+':';}
			if(n>=24 && n<=25){o='02:'+(n-20);}
			if(n>=26){o='2';}
		}
	
		if(i.length>=4)
		{
			var h = i.split(':')[0];
			var m = i.split(':')[1];
			if(m!=null)
			{
				if(m.length==1&&m>=6){o=h+':'}
			}
		}
	
		OldTxt[TxtObj.id] = o;
		TxtObj.value = o;
		return false;
	}
	else
	{
		if (key==8)
		{
			if(OldTxt[TxtObj.id].substring(OldTxt[TxtObj.id].length-1)==':')
			{
				//if the last char was a semicolon, backspace the previous char as well.
				o = OldTxt[TxtObj.id].substring(0,OldTxt[TxtObj.id].length-2);
			}
		}
		else
		{
			o = OldTxt[TxtObj.id];
		}
	}
 
	TxtObj.value = o;
	OldTxt[TxtObj.id] = TxtObj.value;
}

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:

Select all Open in new window

by: kadabaPosted on 2009-11-02 at 10:40:28ID: 25722229

I did not check you code
but I was able to enter
0999 - valid?
try not to have loop holes(for your satisfaction)

also, you could close the question yourself by assigning the point.

by: waf771Posted on 2009-11-02 at 14:16:19ID: 25724380

-

by: waf771Posted on 2009-11-02 at 14:16:23ID: 25724382

-

by: HonorGodPosted on 2009-11-02 at 15:33:50ID: 25724904

Thank you for the grade & points.

Good luck & have a great day.

Question

Allow Backspace Time Format

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Time Format javascript backspace

JavaScript

Scripting Languages

Web Development

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press