Eine Promptbox mit JavaScript

JJAM

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)