Editor schreiben

[Flemli200]

Hi,
ich wollte fragen, ob und wie man das realilsieren kann, das man ein Formular schreibt, in das z.B. ein befehl eingegeben wird, man aber keinen submit button braucht, sondern der inhalt des Formulars bei betätigen der Entertaste an die PHP datei zum verarbeiten geschickt wird??

Könnte mir einer von euch weiterhelfen?

Gruß

Flemming

 

[Space Vampire]

davon ausgehend, dass die eingabetaste den button auslöst, könnte man denn buton einfach mit type="hidden" auszeichnen
nur ne vermutung und nicht getestet...

 

[xXxPeterPanxXx]

davon ausgehend, dass die eingabetaste den button auslöst, könnte man denn buton einfach mit type="hidden" auszeichnen
nur ne vermutung und nicht getestet...

Dann ist es doch aber ein Input type hidden und nicht submit. Einfach mit CSS display : none;

 

[Space Vampire]

uups...meint ich doch *flööt*

 

[Flemli200]

Funktioniert nicht richtig... es soll wie eine konsole sein, die einige funktionen der site steuert...!

 

[Space Vampire]

hä? jetzt versteh ich nur noch bahnhof...

 

[threadi]

Glaube hier wäre JavaScript, ggfs. auch AJAX erforderlich. Mit dem Eventhandler onsubmit im form-Tag kannst Du das Abschicken des Formulars prüfen und die Inhalte per AJAX abschicken ohne, dass die Seite neugeladen wird.

Wenn dein Eingabefeld ein textarea ist, dann müsstest Du dort noch den Eventhandler onkeypress oder onkeyup (je nachdem wie es Funktionieren soll) einfügen und dort den Tastendruck der Entertaste prüfen (gibt dafür bestimmte Eingabecodes, die in jedem JavaScript-Handbuch stehen).

Wenn dein Eingabefeld ein Textfeld ist (input-text) dann genügt es, wenn Du ein input-submit-Feld innerhalb des Formulars ergänzt. Das kann man per CSS dann auch ausblenden, aber ich würde es nicht mit "display: none;" machen.

 

[Basti93]

Wenn du ein Formular hast, das keinen eigenen Submit-Button hat, wird das Formular automatisch abgeschickt, sobald du die ENTER-Taste drückst.

Beispiel:

<form method="post" action="formular.php" id="formular" name="formular">
<p><input type="text" id="eingabe" name="eingabe" /></p>
</form>

Ansonsten könntest du natürlich per JavaScript prüfen, ob die ENTER-Taste gedrückt worden ist und dann das Formular per JavaScript abschicken lassen.

Tastaturereignisse: SELFHTML: JavaScript / Objektreferenz / event

Um zum Beispiel das oben gezeigte Formular abzuschicken, kann dieser JavaScript-Code verwendet werden:

<script type="text/javascript">
document.getElementById("formular").submit();
</script>

 

[mermshaus]

Für das KeyEvent-Handling ist eine Abstraktionsbibliothek wie jQuery zu empfehlen. KeyEvents browserübergreifend korrekt hinzubekommen, ist manchmal etwas schwierig.

Mehr Infos, welche Funktionen die Console erfüllen können soll, wären aber sinnvoll. Generell klingt das schon eher nach Ajax, was noch ein Argument für jQuery wäre.

 

[Flemli200]

und wie bekomme ich das hin, das der Text der weiter oben im Formular steht, stehen bleibt??
geht das mit einer weitergab von variabeln?

Es soll wirklich so aussehen, als ob die Person mit einer konsole arbeiten würde!

 

[threadi]

Entweder durch das Abschicken der Seite die Seite neu laden und dabei alles ausgeben was Du im Formular mit übergeben hast.

Oder AJAX verwenden und nur Teile der Seite aktualisieren, statt das Formular richtig abzuschicken.

 

[mermshaus]

Jonsole. ;)

<?php

// Serverseite

if (count($_GET) > 0) {
    $ret   = implode(' ', $_GET['args']);
    $error = false;

    switch ($_GET['args'][1]) {
        case 'date':
            $args = array_slice($_GET['args'], 2);
            $args = implode(' ', $args);

            $ret = date($args);
            break;
        case 'md5':
            $args = array_slice($_GET['args'], 2);
            $args = implode(' ', $args);

            $ret = md5($args);
            break;
        case 'strtoupper':
            $args = array_slice($_GET['args'], 2);
            $args = implode(' ', $args);

            $ret = strtoupper($args);
            break;
        default:
            $error = true;
            break;
    }
    
    echo json_encode(array('ret' => $ret, 'error' => $error));

    exit;
}

?><!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Jonsole</title>
          <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

function jonsole_handle_php(args)
{
    $.get('index.php', {'args': args, 'r': Math.floor(Math.random() * 100000)}, function (data) {
        if (data.error) {
            jonsole_println("<span class=\"error\">PHP: Error: \"" + data.ret + "\"</span>");
        } else {
            jonsole_println(data.ret);
        }
        $("#jonsole-wrapper").attr({ scrollTop: $("#jonsole-wrapper").attr("scrollHeight") });
    }, 'json');
}

function jonsole_println(line)
{
    $('#jonsole').html($('#jonsole').html() + line + "<br />");
}

function jonsole_set(line)
{
    $('#jonsole').html(line);
}

function jonsole_run(expr)
{
    var tmp     = expr.split(/ /),
        unknown = false;

    jonsole_println('<span class="system">$</span> ' + expr);
    
    if (tmp[0] == 'php') {
        jonsole_handle_php(tmp);
    } else if(tmp[0] == 'clear') {
        jonsole_set('');
    } else if(tmp[0] == 'help') {
        jonsole_println('<span class="system">This version of Jonsole supports the following commands:<br />\
- clear<br />\
- help<br />\
- version<br />\
- php<br />\
&nbsp;&nbsp;- md5 <em>string</em><br />\
&nbsp;&nbsp;- strtoupper <em>string</em><br />\
&nbsp;&nbsp;- date <em>format</em></span>');
    } else if(tmp[0] == 'version') {
        jonsole_println('<span class="system">Jonsole version: r1</span>');
    } else {
        unknown = true;
    }    

    if (unknown) {
        jonsole_println("<span class=\"error\">Unknown command: \"" + expr + "\"</span>");
    }

    $("#jonsole-wrapper").attr({ scrollTop: $("#jonsole-wrapper").attr("scrollHeight") });
}

$('document').ready(function () {
    jonsole_println("<span class=\"system\">[Welcome to Jonsole] Type \"help\" for more info</span>");

    $('#jonsole-input').bind('keydown', function (key) {
        
        if (key.which == 13) {
            jonsole_run($(this).val());
            $(this).val('');
            return false;
        }
    }).focus();
});

</script>

<style type="text/css">

* {
    margin: 0;
    padding: 0;
}

#jonsole-wrapper {
    padding: 5px;
    background: #000;
    color: #fff;
    border: 5px solid #999;
    width: 600px;
    height: 400px;
    font-family: monospace;
    font-size: 11px;
    overflow: auto;
}

#jonsole {

}

#jonsole-wrapper .system {
    background: #666;
}

#jonsole-wrapper .error {
    background: #900;
}

#jonsole-input {
    background: #000;
    color: #fff;
    border: none;
    width: 550px;
    font-family: monospace;
    font-size: 11px;
    display: inline;
}

</style>
    </head>

    <body>

        <form action="" method="post">
            <div id="jonsole-wrapper">
                <div id="jonsole"></div>
                <p><span class="system">$</span> <input id="jonsole-input" type="text" autocomplete="off" /></p>
            </div>
        </form>

    </body>

</html>

Beispielausgabe (Zeilen mit $-Zeichen sind Benutzereingaben):

[Welcome to Jonsole] Type "help" for more info
$ help
This version of Jonsole supports the following commands:
- clear
- help
- version
- php
  - md5 string
  - strtoupper string
  - date format
$ php md5 hallo welt
8b2579f4332f466805d30651b9d6a927
$ php strtoupper hallo welt
HALLO WELT
$ php date Y-m-d H:i:s
2010-03-29 01:17:52
$ version
Jonsole version: r1
$ uerhig
Unknown command: "uerhig"
$