JS Clock Text Input

[Art]

Hi,

I'm using a form text input to display a JavaScript clock. It has no
other purpose than that, just show the date and time. What I would like
to do now is prevent anything else happening when it's moused over. I
was able to remove the cursor using the blur() method, something like
this:

document.formname.inputname.blur();

The cursor appears for about a second then disappears. However, it still
activates. With WebTV I still get the yellow highlight around the input,
I presume the pointer changes to the finger when using a PC.

Is there a way to disable that with JavaScript, so that the input is
simply a static element on the page ? There are the WebTV only
attributes of "nohighlight" and "noactivate' which I don't want to use
as they are not part of any specification and probably have no effect
for PC users.

Thanks for any assistance.

Later, Art.

 

[Evertjan.]

Art wrote on 09 sep 2004 in comp.lang.javascript:

I'm using a form text input to display a JavaScript clock.

Why?

An input is for inputting.

Cann't you simply use a span or a div to display something?

 

[Art]

Hi,

I want the clock to be real time, second by second. I don't know that I
can accomplish that with what you suggest.

I did that with a document.write, however the clock did not increment
second by second. It remained at the time it was when the page was
entered/loaded.

Thanks for your reply.

Later, Art.

 

[Joakim Braun]

Hi,

I want the clock to be real time, second by second. I don't know that I
can accomplish that with what you suggest.

I did that with a document.write, however the clock did not increment
second by second. It remained at the time it was when the page was
entered/loaded.

Thanks for your reply.

Later, Art.

Lookup the various DOM methods for manipulating text node content. That
would let you update text "live" (without form elements) on compliant
browsers.

Joakim Braun

 

[Yann-Erwan Perio]

I'm using a form text input to display a JavaScript clock. It has no
other purpose than that, just show the date and time.

To change the time every second, use setInterval and reset the value of
the control at each interval with the new date's value.

setInterval(
function(){
document.forms[0].elements["controlName"].value=
new Date();
},
1000
);

Is there a way to disable that with JavaScript, so that the input is
simply a static element on the page ?

Evertjan suggestion's might do the job, check the FAQ for DynWrite for a
way to change a text value other than in a form control:

attributes of "nohighlight" and "noactivate' which I don't want to use
as they are not part of any specification and probably have no effect
for PC users.

Well yes, but other hosts may perform other specific actions, you simply
have no way to prevent all of these (all the more there are 100+
browsers available).

Thanks for any assistance.

Even foolish one ? ;-)


<script type="text/javascript">
window.onload=function(evt){
var h=new Function(""),f=document.forms[0].elements;
for(var ii=0;ii<f.length;ii++) { h=setWild(f[ii]); }
document.onclick=function() { h(); }
setInterval(
function(){
for(var ii=0,dd=new Date();ii<f.length;ii++)
f[ii].value=dd;
},
1000
);
}

function setWild(el) {
var m={x:0,y:0}, q, a=[], page, pos, dim, r=true, tgl;

document.onmousemove=function(evt){
evt=evt||window.event;
m.x=evt.clientX||evt.pageX||0;
m.y=evt.clientY||evt.pageY||0;
}

page=function(){
var doc=document.compatMode &&
document.compatMode.indexOf("CSS")!=-1 &&
document.documentElement||document.body;
return {
width:window.innerWidth||doc&&doc.clientWidth||0,
height:window.innerHeight||doc&&doc.clientHeight||0
};
}

pos=function(el){
var p={x:0,y:0};
do {
p.x+=el.offsetLeft;
p.y+=el.offsetTop;
} while(el=el.offsetParent);
return p;
}

dim=function(el){
return {width:el.offsetWidth,height:el.offsetHeight};
}

tgl=function(){
if((r=!r)) q();
}

q=function() {
for(var ii=0,pg=page(),ps,dm,M=Math;ii<a.length;ii++){
ps=pos(a[ii]);
dm=dim(a[ii]);
if(!isNaN(ps.x)) {
if(m.x>ps.x-100&&m.x<ps.x+dm.width+100 &&
m.y>ps.y-100&&m.y<ps.y+dm.height+100){
a[ii].style.position="absolute";
a[ii].style.left=(M.abs(M.random()*pg.width-dm.width))+"px";
a[ii].style.top=(M.abs(M.random()*pg.height-dm.height))+"px";
}
} else {
r=false;
break;
}
}
if(r) setTimeout(arguments.callee,42);
}

return(q(),(setWild=function(el){return (a[a.length]=el,tgl);})(el));
}
</script>

<form>
<input type="text" onfocus="this.blur()" readonly="readonly">
<input type="text" onfocus="this.blur()" readonly="readonly">
<input type="text" onfocus="this.blur()" readonly="readonly">
</form>

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated Thu, 9
Sep 2004 22:26:50, seen in Yann-Erwan Perio

Read the newsgroup FAQ, and find my js-date2.htm.

It's rather pointless, except as a programming exercise. For date and
time elsewhere, see my js-date5.htm.

To change the time every second, use setInterval and reset the value of
the control at each interval with the new date's value.

setInterval(
function(){
document.forms[0].elements["controlName"].value=
new Date();
},
1000
);

That does not necessarily do every second. In Win98 it will miss about
one in 20; in NT perhaps 1 in 100 or 200; the fix is easy enough. As
above.