its challenging!Having Both disabled and enabled values simultaneously in a TextBox.

I have a requirement that is really quiet strange.

I need to get the Date value from the Text field.
The Text field must by default holds two forward slashes which can't be modified.
for eg: let us consider this 13/05/2004 date.
Here the two forward slashes of the date must be present by default in the text field at their corresponding locations. And also they shouldn't(can't) be altered/moved or changed.

whenever user enters the date, he has to simply fillup the digits(here in the above eg: 13 05 2004).
Once the first two digits are entered, automatically the cursor has to cross the first forward slash.when he finishes entering the second two digits, the cursor should automatically cross the second forward slash.And User can enter the third number.


Is this possible using Java script? Then how? Plz respond if u got any ideas

with regards,
Ramesh gollapudi

I'd recomend using 3 text fields, and once the user enters a number or two then it changes to the next field.

I've seen some good implementations of a popup Javascript calendar.
The exact names of these escape me, but I think there was one posted in these forums a long while back...
If I figure it out, I'll post it here... otherwise, search Google.

That's not strange at all and i had to do something similar at work.
Yes it can be done. The following script can be used to format any text area. It works very well with IE but it needs some work for netscape and opera. The original script had some bugs wich i corrected. This is done by calling the dfilter function when onkeydown is used, you should add it to your object tag, like this



As you can see, the '#' will be input data in this picture/format set. You can change it to whatever you want, in this case it supports a date format.

The set of functions which are called upon keydown:



croky

Perhaps I didn't do it properly, but your example didn't work in either one of my browsers [Firefox 1.0 final, IE5.5]

However, this raises the issue of, what if the user has Javascript disabled.
I agree with Viper_SB in that three text boxes might be the best example... or even three drop-down select boxes.

Yeah i know. I noticed this PHP code tag i used when posting. It inserts some blank spaces in some sections of the code, like dFilterS tep on line 12. Try triming those spaces.
If you want to, try posting the whole HTML code, so i can make a quick debug.


Then he can enable it. I read very often this kind of justification and i simply don't agree with it. The fact is 99,9 % of javascript capable browser users do have javascript enable.


Most probably yes. It is the safest and easiest option.

croky

Here's a clean code,

// [dFilter] - A Numerical Input Mask for JavaScript
// Written By Dwayne Forehand - March 27th, 2003
// Please reuse & redistribute while keeping this notice.

var dFilterStep

function dFilterStrip (dFilterTemp, dFilterMask)
{
dFilterMask = replace(dFilterMask,'#','');
for (dFilterStep = 0; dFilterStep < dFilterMask.length++; dFilterStep++)
{
dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterS tep,dFilterStep+1),'');
}
return dFilterTemp;
}

function dFilterMax (dFilterMask)
{
dFilterTemp = dFilterMask;
for (dFilterStep = 0; dFilterStep < (dFilterMask.length+1); dFilterStep++)
{
if (dFilterMask.charAt(dFilterStep)!='#')
{
dFilterTemp = replace(dFilterTemp,dFilterMask.charAt(dFilterStep ),'');
}
}
return dFilterTemp.length;
}

function dFilter (key, textbox, dFilterMask)
{
dFilterNum = dFilterStrip(textbox.value, dFilterMask);
if (key>95&&key<106)
{
key=key-48
}
if ((key==9) || (key==13))
{
return true;
}
if (key==46)
{
dFilterNum = dFilterStrip('', dFilterMask);
}

if (document.selection.createRange().text.length==dFi lterMask.length)
{
dFilterNum = dFilterStrip('', dFilterMask);
dFilterNum = dFilterNum+String.fromCharCode(key);
}
else if (key==8&&dFilterNum.length!=0)
{
dFilterNum = dFilterNum.substring(0,dFilterNum.length-1);
}
else if ( ((key>47&&key<58)||(key>95&&key<106)) && dFilterNum.length<dFilterMax(dFilterMask) )
{
dFilterNum=dFilterNum+String.fromCharCode(key);
}

var dFilterFinal='';
for (dFilterStep = 0; dFilterStep < dFilterMask.length; dFilterStep++)
{
if (dFilterMask.charAt(dFilterStep)=='#')
{
if (dFilterNum.length!=0)
{
dFilterFinal = dFilterFinal + dFilterNum.charAt(0);
dFilterNum = dFilterNum.substring(1,dFilterNum.length);
}
else
{
dFilterFinal = dFilterFinal + "";
}
}
else if (dFilterMask.charAt(dFilterStep)!='#')
{
dFilterFinal = dFilterFinal + dFilterMask.charAt(dFilterStep);
}
// dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterS tep,dFilterStep+1),'');
}


textbox.value = dFilterFinal;
return false;
}

function replace(fullString,text,by) {
var strLength = fullString.length, txtLength = text.length;
if ((strLength == 0) || (txtLength == 0)) return fullString;

var i = fullString.indexOf(text);
if ((!i) && (text != fullString.substring(0,txtLength))) return fullString;
if (i == -1) return fullString;

var newstr = fullString.substring(0,i) + by;

if (i+txtLength < strLength)
newstr += replace(fullString.substring(i+txtLength,strLength ),text,by);

return newstr;
}
//----------------------------------

... and here his an example of how to apply it ,

<INPUT TYPE="text" NAME="xDATE" VALUE="22/11/2004" SIZE="10" MAXLENGTH="10" ONKEYDOWN="return dFilter(event.keyCode, this, '##/##/####');void(null);" >

Croky

Damn. Please trim spaces here
dFilterTemp = replace(dFilterTemp,dFilterMask.substring(dFilterS tep,dFilterStep+1),'');

and here

if (document.selection.createRange().text.length==dFi lterMask.length)

croky

croky use the [ code ] [/ code ] tags (without the spaces) they allow you to format code correctly on the forum