...

View Full Version : Press Key to Add/Change Text



esntric
04-08-2003, 05:37 AM
I need a script that will insert text into a div when a key is pressed.
32 ( Spacebar ).
I have been playing around with a few scripts but I have been unable to get them to do what I want.

Link1 ( Description on Spacebar ) Site Rating
Link2 ( Description on Spacebar ) Site Rating
Link3 ( Description on Spacebar ) Site Rating

But it should only appear when the Spacebar is pressed. Anything will do as long as its compatible with IE4.0+ or something.

Any help would be appreciated. =)

HairyTeeth
04-08-2003, 09:39 PM
Just to clarify: The three hyperlinks...

Link1 ( Description on Spacebar ) Site Rating (etc etc)

are visible on the page. When the user presses the spacebar, then a div appears with the appropriate text for the appropriate link?

Also, is IE4+ compatibility or most 4+ browsers (including Netscape 4+ etc etc)

esntric
04-09-2003, 12:43 AM
Yes. That is correct. =)

HairyTeeth
04-09-2003, 03:41 AM
Try this and see how it goes. I haven't got it working for NN4 yet (maybe some here knows how).
It works in IE 5 (using document.all so it should be ok for IE4) and Mozilla 1.0.
As for the rest: test it.


<html>
<head>
<title>Keypress</title>
<script type="text/jav&#97;script" language="jav&#97;script">
<!--;
function keypress(e,param) {
var theKey,theDiv;
var dom = (document.getElementById && !document.all);
var ie4 = (document.all);
//text for the div
var txt1 = "Super Site!!!";
var txt2 = "...hmmm...pretty good";
var txt3 = "Absolute bunkum!!!";
// get keyCode
if (dom){
document.addEventListener("keyup",keypress,true);
theKey = e.keyCode;
theDiv=document.getElementById('divLink')
}else if(ie4){
theKey=window.event.keyCode;
theDiv = document.all.divLink
}
// if spacebar
if (theKey == 32) {
theDiv.style.visibility = "visible";
switch(param){
case "x":
theDiv.innerHTML = txt1;
break;
case "y":
theDiv.innerHTML = txt2;
break;
case "z":

theDiv.innerHTML = txt3;
break;
case "clear":
theDiv.style.visibility = "hidden";
theDiv.innerHTML = '';
break;
}
}
}
//-->
</script>
</head>
<body>
<a href="jav&#97;script: void(0)"
onkeydown="keypress(event,'x')"
accesskey="x">alt+x then Spacebar</a>
<br />
<a href="jav&#97;script: void(0)"
onkeydown="keypress(event,'y')"
accesskey="y">alt+y then Spacebar</a>
<br />
<a href="jav&#97;script: void(0)"
onkeydown="keypress(event,'z')"
accesskey="z">alt+z then Spacebar</a>
<br />
<a href="jav&#97;script: void(0)"
onkeydown="keypress(event,'clear')"
accesskey="k">alt+k then Spacebar to Clear the Div</a>

<div id="divLink"
style="position:relative;visibility:hidden;
top:50px;left:0px;width:200px;height:200px;
color:red"></div>
</body>
</html>

esntric
04-09-2003, 04:07 AM
Wow, thats great. =D

I didnt even know you could use "ALT"...



Perhaps this would be something good for me to disect and use to learn a few things. ;)


Thank you. Much appreciated. =D

esntric
04-13-2003, 10:22 PM
Could you help me just once more, HairyTeeth? I was playing around with the coding you gave me and apparently I didnt understand it completely.
Or perhaps it's something I just did wrong; as this was my first attempt using Arrays.
Could you look over this and see if you can find what I did wrong? I dont even know if I'm using the Arrays right.

<html>
<head>
<script>
function keypress(e,param) {

var time = new Array(3)
descr[0] = "i really liked this site"
descr[1] = "this site is lacking"
descr[2] = "this site is alright";
var which = new Array(3)
which[0] = document.getElementById('dec1')
which[1] = document.getElementById('dec2')
which[2] = document.getElementById('dec3');
var theKey;
var ie4 = (document.all);
// get keyCode
if (dom){
document.EventListener("keyup",keypress,true);
theKey = e.keyCode;
}else if(ie4){
theKey=window.event.keyCode;
}
// if spacebar
if (theKey == 32) {
which[0].innerHTML = "descr[0]";
which[1].innerHTML = "descr[1]";
which[2].innerHTML = "descr[2]"; }
}
</script>
</head>
<body>

<a href="#">This is link 1</a><span id="dec1"></span>4 out of 5 stars<br>
<a href="#">This is link 2</a><span id="dec2"></span>2 out of 5 stars<br>
<a href="#">This is link 3</a><span id="dec3"></span>3 out of 5 stars<br>

</body>
</html>

Thank you for helping me before. If you dont feel like it this time I understand. Won't hold it against ya. =)

HairyTeeth
04-13-2003, 10:51 PM
lol, no prob, i like doing this stuff (i must be craaazy!). There's a few things here...i'll get back to you.

esntric
04-13-2003, 10:53 PM
...Yes. You must be crazy. =D

HairyTeeth
04-14-2003, 02:52 AM
What sort of event (keypress, onclick etc etc) do you want to use to call the function?
Do you still want to use the spacebar idea, or is it a click event on a link?

esntric
04-14-2003, 02:57 AM
Spacebar.

I want when the Spacebar is pressed for several span's to be wrote to.

A really good example would be AIM. In an AIM IM if you press F2 a time appears next to a persons S/N; showing what time that message was sent.

Before F2
esntric: hello..

After F2
esntric (9:57:20 PM): hello..

The very same concept. =)

I hope that this is what you needed to know.

HairyTeeth
04-14-2003, 06:29 AM
Originally posted by esntric
I want when the Spacebar is pressed for several span's to be wrote to.


At once?

Anyway, have a go at this:


<html>
<head>
<title>Keypress Demo</title>

<script type="text/jav&#97;script" language="jav&#97;script">
<!--;

var msie = (document.all)?1:0;

var descr = new Array(3);
descr[0] = "i really liked this site! ";
descr[1] = "this site is lacking. ";
descr[2] = "this site is alright. ";

function keypress(e, selectedObj){
var browserObj,theKey;
var arrNumb = selectedObj.substring(3);

for(i=0;i<descr.length;i++){
if(!msie){
document.getElementById('dec'+i).innerHTML = ""
browserObj = document.getElementById(selectedObj);
document.addEventListener("keyup",keypress,true);
theKey = e.keyCode;
}else{
document.all('dec'+i).innerHTML = ""
browserObj = document.all(selectedObj);
theKey=window.event.keyCode;
}
}

if(theKey == 32){
if(browserObj.innerHTML=='')
browserObj.innerHTML= descr[arrNumb]
else
browserObj.innerHTML = ""
}
}

//-->
</script>
</head>
<body>

<p>

<a href="jav&#97;script:void(0)"
onkeydown="keypress(event,'dec0')">This is link 1</a>
<span id="dec0"></span>4 out of 5 stars
<br />

<a href="jav&#97;script:void(0)"
onkeydown="keypress(event,'dec1')">This is link 2</a>
<span id="dec1"></span>2 out of 5 stars
<br />

<a href="jav&#97;script:void(0)"
onkeydown="keypress(event,'dec2')">This is link 3</a>
<span id="dec2"></span>3 out of 5 stars
<br />

</p>

</body>
</html>

esntric
04-14-2003, 04:29 PM
Yes. All at once.

Again, you have given me a wonderful script. Perhaps some day I'll be able to write such scripts. As of right now the most I can do are alerts and prompts...

Thank you once again for taking the time to help me. You are very kind.

esntric
04-16-2003, 02:56 AM
<script language="JavaScript1.2">

var spacebar=32

if (document.layers)
document.captureEvents(Event.KEYPRESS)
function text(e){
if (document.layers){
if (e.which==spacebar)
document.all.e_1.innerHTML = "text";
document.all.e_2.innerHTML = "text";
document.all.e_3.innerHTML = "text";
document.all.R_1.innerHTML = "text";
document.all.R_2.innerHTML = "text";
document.all.R_3.innerHTML = "text";
document.all.R_4.innerHTML = "text";
}
else if (document.all){
if (event.keyCode==spacebar)
document.all.e_1.innerHTML = "text";
document.all.e_2.innerHTML = "text";
document.all.e_3.innerHTML = "text";
document.all.R_1.innerHTML = "text";
document.all.R_2.innerHTML = "text";
document.all.R_3.innerHTML = "text";
document.all.R_4.innerHTML = "text";
}
}
document.onkeypress=text

</script>


There's nothing wrong with the above, right? It works fine for me. Would work with other browsers and such?

HairyTeeth
04-16-2003, 10:53 AM
I'd be very surprised if that script worked in Netscape Navigator(Nav) versions 4. It doesn't understand either 'document.all' or 'innerHTML'. Nav4x references divs and spans differently.


//if Nav 4x;
if(document.layers){
document.e_1.document.write(txt);
document.e_1.document.close();
}

If a div or span is enclosed within another div or span, the refrence gets even longer:


//if Nav 4x;
if(document.layers){
document.outerDiv.document.innerSpan.document.write(txt);
document.outerDiv.document.innerSpan.document.close();
}

Normally though, you can use a variable that shortens the reference:


var dynLayer;
if(document.layers){
dynLayer = document.outerDiv.document.innerSpan;
dynLayer.document.write(txt);
dynLayer.document.close();
}

The thing about naming spans or divs with the same or similar names, is that you can use a loop to iterate through their properties. Using your example spans:


<html>
<head>
<title>Demo</title>
<script type="text/jav&#97;script" language="jav&#97;script">
<!--;

function writeToSpans(){
var txt = "Foo Bar Bar";
var ind=0; //index value;
var len=4; //number of spans;
var dynLayer; //shortcut name to span onjects;

for(i=0;i<len;i++){
ind = (i+1);
// if Nav 4x;
if(document.layers){
dynLayer =eval("document.e_"+ind);
dynLayer.document.write("<font color='white'>" + txt + "</font>");
dynLayer.bgColor = "blue";
dynLayer.document.close();
//else if ie 4x;
}else if(document.all & ! document.getElementById){
dynLayer = eval("document.all('e_" + ind + "')");
dynLayer.style.color="white";
dynLayer.style.backgroundColor = "blue";
dynLayer.innerHTML = txt;
// else Moz 1x,Netscape 6x, 7x, IE 5x,6x etc;
}else if(document.getElementById){
dynLayer = eval("document.getElementById('e_" + ind + "')");
dynLayer.style.color="white";
dynLayer.style.backgroundColor = "blue";
dynLayer.innerHTML = txt;
}//end if
}//end for loop
}//end function
//-->
</script>
</head>
<body>
<a href="jav&#97;script: void writeToSpans()">Write To Spans</a>
<span id="e_1"
style="position:absolute;top:35px;left:10px;">
e_1
</span>
<span id="e_2"
style="position:absolute;top:55px;left:10px;">
e_2
</span>
<span id="e_3"
style="position:absolute;top:75px;left:10px;">
e_3
</span>
<span id="e_4"
style="position:absolute;top:95px;left:10px;">
e_4
</span>
</body>
</html>

Take a look at the ind=0 variable. It is a number variable. Immediately after the for...loop, we state that ind=(i+1). What we are doing is adding one to the value of i. So, the first time through the loop, ind=1.

When the script branches for each browser object, each particular syntax for referencing objects is evaluated [eval()], which makes a valid object reference out of a string and variable values. Looking at the eval statement in the document.layers branch of the script we see:


dynLayer=eval("document.e_"+ind)


Which evaluates as:

1st loop iteration:


document.e_1

2nd loop iteration:


document.e_2

3rd loop iteration:


document.e_3

4th loop iteration:


document.e_4

The process is the same for the other script branches.
IE4x


dynLayer =eval("document.all('e_"+ind+"')")

...which, on the first loop iteration returns:


dnyLayer = document.all('e_1')

Moz 1x etc


dynLayer =eval("document.getElementById('e_"+ind+"')")

...which evaluates as:


dynLayer = document.getElementById('e_1')


At each itereation, the span with id="e_whatever" is written to and ind is incremented by one.

Personally, I find Nav4x a real pain in the butt and don't worry about it to much anymore insofar as it only gets plain style sheets and very little dhtml.

I'd have a browse through http://www.javascriptkit.com/ and look for browser detection.

esntric
04-16-2003, 09:42 PM
Yes, I have much learning to do. Off I go to javascriptkit.com!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum