Java & JavaScript


Home
Applets
Scripts
   Navigation:
 · Kontextmenü
 · Linkwechsler
   Dialogboxen:
 · Alert
 · Alert 2
 · Confirm
 · Prompt
   Animation:
 · Kreis
 · Kreis 2
 · Kreis 3
 · Drei Kreise
 · Spirale
 · Planetarium
 · Globus
   Grafik-Effekte:
 · Clipping
 · Clipping 2
 · Clipping 3
 · Alpha-Clipping
 · Fading
 · Wellenmuster
 · Wellenmuster 2
   Bildschirmschoner:
 · Proto
 · Marquee
 · Donut
 · Worm
 · Mondrian
 · Pacman
   Datum & Uhrzeit:
 · Countdown
 · Countup
 · Wochentag
 · Last Modified
   Fraktale:
 · Apfelmännchen
 · Apfelmännchen 2
 · Juliamenge
 · Juliamenge 2
 · C-Wert-Generator
   Mathematik:
 · Primzahlen
 · Primzahlen 2
   Verschiedenes:
 · Dynamic Popup
 · TextArea Counter
 · Warteschleife
 · Mausschreiber
Gäste
Kontakt

- JavaScript : Dialogboxen : Prompt -


Eine Prompt-Box mit JavaScript.

Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 6.01 - 6.22, 7.0 und 7.1, sowie Mozilla 1.0, 1.21 und 1.4.

In allen nicht-kompatiblen Browsern erscheint weiterhin die graue Standart-Promptbox.

Das Verschieben der Prompt-Box funktioniert bisher nur im IE.


Demo:  Hier


Quelltext:

Seite, auf der die Prompt-Box erscheinen soll.

<html>
  <head>
    <title>Prompt-Box</title>

    <script language="JavaScript">
      promptWidth=330; //Prompt-Box-Mindest-Breite
      promptHeight=200; //Prompt-Box-Mindest-Höhe
      xPromptStart=300,yPromptStart=100; //Wo die Prompt-Box erscheinen soll

      //Titelzeile:
      promptTitle="<p align='center'><b>JavaScript Prompt !!!</b></p>";

      //Haupttext:
      promptText="<p align='center'>Sie wollen dieses Script? ... </p>";

      //Was passieren soll, wenn auf OK geklickt, bzw. Enter gedrückt wird:
      function okPrompt() {
        if(document.promptform.promptinput.value=="bitte" ||
            document.promptform.promptinput.value=="zackzack") {
          abortPrompt(); //siehe unten
          document.location.href="Prompt.zip"; //Download-Dialog anzeigen
        }
        else {
          document.promptform.promptinput.value="Falsche Eingabe !";
          document.promptform.promptinput.select();
        }
      }

      //Was passieren soll, wenn auf Abbrechen geklickt wird:
      function abortPrompt() {
        document.getElementById("prompt").style.top=-500; //Prompt-Box verstecken
        document.promptform.promptinput.value=""; //Eingabe zurücksetzen
      }

      //Für andere Browser:
      function promptAlternative() {
             alert("Sorry, aber Ihr Browser ist für dieses Script nicht geeignet!");
      }
    </script>

    <!-- Prompt-Box Vorlage laden (s.u.) -->
    <script language="JavaScript" src="Prompt.js"></script>

  </head>

  <body>
    <!-- Aufruf der Prompt-Box. Hier per Link -->
    <p><a href="javascript:showPrompt()">Prompt-Box anzeigen</a></p>
  </body>

</html>

Durch Auslagerung der leeren Prompt-Box in eine .js-Datei, braucht der größte Teil des Scripts nur einmal geladen werden und steht dann ggf. für jede andere Seite sofort zur Verfügung. (Nicht bei deaktiviertem Cache versteht sich.)


Die leere Prompt-Box-Vorlage (Prompt.js), ohne Layout-Angaben:

ie5=(document.getElementById&&document.all&&document.styleSheets)?1:0;
nn6=(document.getElementById&&!document.all)?1:0;

//Prompt-Box erstellen
if(ie5||nn6) {
  document.write(
    "<div style='position:absolute;top:-500;left:0;z-index:100' id='prompt'>"+
      "<table onmousedown='getxyRelativ()'"+
          "onmousemove='movePrompt()' onmouseup='moveStatus=0'>"+
        "<tr><td>"+promptTitle+"</td></tr>"+
        "<tr><td>"+promptText+"</td></tr>"+
        "<tr><td>"+
          "<form name='promptform' onsubmit='okPrompt();return false'>"+
            "<input type='text' value='' name='promptinput'>"+
          "</form>"+
        "<tr><td>"+
          "<input type='button' value='OK' onclick='okPrompt()'>"+
          "<input type='button' value='Abbrechen' onclick='abortPrompt()'>"+
        "</td></tr>"+
      "</table>"+
    "</div>"
  );
}

//Box anzeigen
function showPrompt() {
  if(ie5||nn6) {
    moveStatus=0;
    xPrompt=xPromptStart, yPrompt=yPromptStart;
    if(ie5) {
      document.getElementById("prompt").style.left=xPrompt+document.body.scrollLeft;
      document.getElementById("prompt").style.top=yPrompt+document.body.scrollTop;
    }
    else if(nn6) {
      document.getElementById("prompt").style.left=xPrompt+window.pageXOffset;
      document.getElementById("prompt").style.top=yPrompt+window.pageYOffset;
    }
    document.promptform.promptinput.focus();
  }
  else promptAlternative();
}

//Relative Mausposition ermitteln
var xRelativ, yRelativ;
function getxyRelativ() {
  moveStatus=1;
  if(ie5) {
  xRelativ=event.clientX-xPrompt;
  yRelativ=event.clientY-yPrompt;
}

//Box bewegen (nur IE)
function movePrompt() {
  if(ie5&&moveStatus>0) {
    xPrompt=document.getElementById("prompt").style.left=
        event.clientX+document.body.scrollLeft-xRelativ;
    yPrompt=document.getElementById("prompt").style.top=
        event.clientY+document.body.scrollTop-yRelativ;
  }
}


Download  Prompt.zip (ca. 2 kb)




© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | Nutzung | eMail