Forenindex » Programmierung/Entwicklung » JavaScript » Events :- hintergrund & text farben ändern mit onkeyup und nür bestimmte Ziffern

Events :- hintergrund & text farben ändern mit onkeyup und nür bestimmte Ziffern

here4fun
Beiträge gesamt: 47

9. Aug 2004, 01:50
Bewertung:

gelesen: 3009

Beitrag als Lesezeichen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- kommentar weiß nicht so ganz weiter ... z.b. nur tabelle ist zulassbar ?-->
<html>
<head>
<title>EVENTS</title>
<script type="text/javascript">
function tastendruck() {
var charASC = event.keyCode(onkeyup);
var charSTD = String.fromCharCode(charASC);
alert("Das war ein " + charSTD);
return true;
}
document.onkeyup = tastendruck;
</script>
</script>
</head>
<body onkeyup="tastatur(event);">
<center>
<h2> JASC LE9 Events : <br>Benutzer Definierte bgcolor & textcolor </h2>
<br>
<h3>Hier kannst du das Aussehen des Fensters ganz alleine bestimmen</h3>
<br>
<form name ="formular">
<table>
<tr>
<td align="right"><b>Hintergrundfarbe: #</b></td>
<td><input type="text" name="h_farbe" size="6"
onkeyup="function h_farbe ()"></td></tr>
<tr>
<td align="right"><b>Textfarbe: #</b></td>
<td><input type="text" name="t_farbe" size="6"
onkeyup="function t_farbe()"></td></tr>
<!--Kommentar -->
</table>
<br><br>
<table cellpadding="3" cellspacing="1" border="1" width="600">
<tr>
<td align="center" width="150">0</td><td align="center" width="150">48</td><td align="center" width="150">A</td><td align="center" width="150">65</td>
</tr>
<tr>
<td align="center" width="150" >1</td><td align="center" width="150">49</td><td align="center" width="150">B</td><td align="center" width="150">66</td>
</tr>
<tr>
<td align="center" width="150">2</td><td align="center" width="150">50</td><td align="center" width="150">C</td><td align="center" width="150">67</td>
</tr>
<tr>
<td align="center" width="150">3</td><td align="center" width="150">51</td><td align="center" width="150">D</td><td align="center" width="150">68</td>
</tr>
<tr>
<td align="center" width="150">4</td><td align="center" width="150">52</td><td align="center" width="150">E</td><td align="center" width="150">69</td>
</tr>
<tr>
<td align="center" width="150">5</td><td align="center" width="150">53</td><td align="center" width="150" >F</td><td align="center" width="150">70</td>
</tr>
<tr>
<td align="center" width="150">6</td><td align="center" width="150">54</td><td align="center" width="150">Backspace</td><td align="center" width="150">8</td>
</tr>
<tr>
<td align="center" width="150">7</td><td align="center" width="150">55</td><td align="center" width="150">&nbsp;</td><td align="center" width="150">&nbsp;</td>
</tr>
<tr>
<td align="center" width="150">8</td><td align="center" width="150">56</td><td align="center" width="150">&nbsp;</td><td align="center" width="150">&nbsp;</td>
</tr>
<tr>
<td align="center" width="150">9</td><td align="center" width="150">57</td><td align="center" width="150">&nbsp;</td><td align="center" width="150">&nbsp;</td>
</tr>
</table>
</form>
<p> ... </p>
</font>
</center>
<noscript> Ihr Browser versteht Leider kein Javascript ! </noscript>
</body>
</html>

Events :- hintergrund & text farben ändern mit onkeyup und nür bestimmte Ziffern

here4fun
Beiträge gesamt: 47

9. Aug 2004, 18:05
Bewertung:

gelesen: 3009

Beitrag als Lesezeichen
War als frage nicht überschaubar nehme ich an ... ( Bin Englisch) I have a problem I can't seem to be able to solve. Thus feel free to give advive. Given is :
1)HTML hexadezimal codes to be used. User is only allowed to use following digets, browser is not allowed to display any other & user is to get an error message. Allowed are 0 - 9 , 48 - 57 , Capital A - F & backspace , last set 65 - 70 & 8.
2) 2 text fields where the user can enter the HTML color codes eg #FFFF00 for yellow error message when more than 6 digets filled in
3) Event onkeyup ( heres my biggest problem the color should change when user has filled in the 6 piece html color code , hence onBlur I'd think or !onFocus. but how do I nake this happen ? )
4) Script has to work for both IE and Navigator

my 2nd attempt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JASC LE9 EVENTS s01k4305</title>
<script type="text/javascript">
<!--
function check() {
if((navigator.appName == "Microsoft Internet Explorer") &&
((event.keyCode < 8 || event.keyCode > 8) &&
(event.keyCode < 48 || event.keyCode > 57) &&
(event.keyCode < 65 || event.keyCode > 70))) {
event.returnValue = false;
alert("Das ist keine HTML bekannte hexadezimalen Code!")
} else {
document.captureEvents(Event.KEYPRESS);
event();
}
}
document.onkeypress = function(event) {
if((event.which < 8 || event.which > 8) &&
(event.which < 48 || event.which > 57) &&
(event.which < 65 || event.which > 70)) {
return false;
}
}
function hg_farbe(h_farbe) {
if (h_farbe.length < 6) {
alert ("Wer kann da nicht bis 6 zählen? - Die Hintergrundfarbe bleibt, wie sie ist!");
} else {
var colorString ="#" + h_farbe;
document.bgColor=colorString;
}
}
function tx_farbe(t_farbe) {
if (t_farbe.length < 6) {
alert ("Wer kann da nicht bis 6 zählen? - Die Textfarbe bleibt, wie sie ist!");
} else {
var colorString ="#" + t_farbe;
document.fgColor=colorString;
}
}
//-->
</script>
</head>
<body>
<center>
<form name ="formular">
<table>
<tr>
<td align="center"><b>Bitte nur HTML bekannten hexadezimalen Codes Eintragen.</b></td>
</tr>
<tr><td>&nbsp;</td></tr>
<tr>
<td align="center">Hintergrundfarbe: #
<input type="text" name="h_farbe" size="10" maxlength="6"
onKeypress="check()"
onchange="hg_farbe(document.formular.h_farbe.value)"></td></tr>
<tr>
<td align="center">Textfarbe: #
<input type="text" name="t_farbe" size="10" maxlength="6"
onKeypress="check()"
onchange="tx_farbe(document.formular.t_farbe.value)"></td></tr>
</table>
</form>
<br><br><br>
<p>
<h4>Murphy's 10 Gesetze</h4>
1.Nichts ist so leicht, wie es aussieht.<br>
2.Alles dauert l&auml;nger als man glaubt.<br>
3.Wenn es die M&ouml;glichkeit gibt, dass Dinge schief gehen, dann werden sie so schief gehen, dass es den gr&ouml;&szlig;ten Schaden anrichtet.<br>
4.Es wird immer genau eine M&ouml;glichkeit mehr geben, wie etwas schief gehen kann, wie man ausgeschaltet hat.<br>
5.Dinge sich selbst zu &uuml;berlassen, f&uuml;hrt vom Regen in die Traufe.<br>
6.Immer wenn man sich ernsthaft mit etwas befassen m&ouml;chte, kommt etwas anderes dazwischen.<br>
7.Jede L&ouml;sung bringt mindestens zwei neue Probleme.<br>
8.Es ist unm&ouml;glich, etwas ganz sicher zu machen, denn Dummk&ouml;pfe sind zu erfinderisch.<br>
9.Die Natur ergreift immer Partei f&uuml;r den versteckten Fehler.<br>
10.Mutter Natur ist ein b&ouml;ses Weib.<br>
<br>
<b><i>" Murphy war ein Optimist ! "</i></b><br>
</p>
</font>
</center>
<noscript> Ihr Browser versteht Leider kein Javascript ! </noscript>
</body>
</html>

Events :- hintergrund & text farben ändern mit onkeyup und nür bestimmte Ziffern

oesi50
  
Beiträge gesamt: 2315

9. Aug 2004, 19:31
Bewertung:

gelesen: 3009

Beitrag als Lesezeichen
hi here4fun,

captureEvents() is Netscape only. What about onKeyup="check()" for all others.

see my example:
<script type="text/javascript">
<!--
var NN = document.layer ? 1 : 0;
var IE = document.all ? 1 : 0;
var DOM = document.getElementById ? 1 : 0;

if(NN){
document.onKeyUp="check(event.target)"
}

function check(farbe) {
re = /([0-9a-fA-F]*).*/;
farbe.value = farbe.value.replace(re, "$1");
if(farbe.value.length < 6){
return;
}
if(farbe.name == 'h_farbe'){
document.bgColor = "#" + farbe.value;
}
if(farbe.name == 't_farbe'){
document.fgColor = "#" + farbe.value;
}

}
//-->
</script>
</head>
<body>
<center>
<form name ="formular">
<table>
<tr><td align="center"><b>Bitte nur HTML bekannten hexadezimalen Codes Eintragen.</b></td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td align="center">Hintergrundfarbe: #<input type="text" name="h_farbe" size="10" maxlength="6" onKeyup="check(this)"></td></tr>
<tr><td align="center">Textfarbe: #<input type="text" name="t_farbe" size="10" maxlength="6" onKeyup="check(this)"></td></tr>
</table>
</form>


greetings Oesi
I know, that I know nothing... (Sokrates)

Events :- hintergrund & text farben ändern mit onkeyup und nür bestimmte Ziffern

here4fun
Beiträge gesamt: 47

9. Aug 2004, 20:20
Bewertung:

gelesen: 3009

Beitrag als Lesezeichen
Hi there Oesi !

Thanks. the way you identifield browsers is in chapter 12. where this exercise is chapter 9. browser is to be identified over unserAgent? and where do I add the very annoying but for homeworks very important alerts. Thats not a color ? But it works like a dream on the onkeyup="check()"

Thanks a million !

Events :- hintergrund & text farben ändern mit onkeyup und nür bestimmte Ziffern

oesi50
  
Beiträge gesamt: 2315

9. Aug 2004, 20:39
Bewertung:

gelesen: 3009

Beitrag als Lesezeichen
here, with alerts:

function check(farbe) {
re = /([0-9a-fA-F]*).*/;
farbe.value = farbe.value.replace(re, "$1");
if(farbe.value.length < 6){
alert ("Wer kann da nicht bis 6 zählen? - Die "+farbe.name+" bleibt, wie sie ist!");
return;
}
if(farbe.name == 'Hintergrundfarbe'){
document.bgColor = "#" + farbe.value;
}
if(farbe.name == 'Textfarbe'){
document.fgColor = "#" + farbe.value;
}
}
//-->
</script>
</head>
<body>
<center>
<form name ="formular">
<table>
<tr><td align="center"><b>Bitte nur HTML bekannten hexadezimalen Codes Eintragen.</b></td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td align="center">Hintergrundfarbe: #<input type="text" name="Hintergrundfarbe" size="10" maxlength="6" onKeyup="check(this)"></td></tr>
<tr><td align="center">Textfarbe: #<input type="text" name="Textfarbe" size="10" maxlength="6" onKeyup="check(this)"></td></tr>

This is a patch, use my other code around.

greetings Oesi
I know, that I know nothing... (Sokrates)

(Dieser Beitrag wurde von oesi50 am 9. Aug 2004, 20:41 geändert)

Events :- hintergrund & text farben ändern mit onkeyup und nür bestimmte Ziffern

here4fun
Beiträge gesamt: 47

9. Aug 2004, 23:29
Bewertung:

gelesen: 3009

Beitrag als Lesezeichen
Hallo Oesi !

Danke Sehr für die hilfe. Funktioniert 100% ;)
Thank you very much

here4fun
aka barbara