Javascript-forum

Normale Version: Textfeld an get Variable anpassen
Sie sehen gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Nach einen Get Post wird die Variable wieder in das Textfeld geschrieben, und das Textfeld ist genauso groß wie das Wort.

PHP-Code:
<?php
if(isset($_GET['text'])){
   $pixel=18;
   $wort=$_GET['text'];
   $menge=strlen($wort);
   $zaehlen=0;
   for($x=0;$x<$menge;$x++){
        switch ($wort[$x]){
           case '0':$buchstabe 8;break; 
           case '1':$buchstabe 8;break; 
           case '2':$buchstabe 8;break; 
           case '3':$buchstabe 8;break; 
           case '4':$buchstabe 8;break; 
           case '5':$buchstabe 8;break; 
           case '6':$buchstabe 8;break; 
           case '7':$buchstabe 8;break; 
           case '8':$buchstabe 8;break; 
           case '9':$buchstabe 8;break; 
           case 'A':$buchstabe 12;break;
           case 'Ä':$buchstabe 12;break;           
           
case 'B':$buchstabe 11;break;
           case 'C':$buchstabe 11;break;
           case 'D':$buchstabe 12;break;
           case 'E':$buchstabe 10;break;
           case 'F':$buchstabe 9;break;
           case 'G':$buchstabe 12;break;
           case 'H':$buchstabe 12;break;
           case 'I':$buchstabe 5;break;
           case 'J':$buchstabe 6;break;
           case 'K':$buchstabe 12;break;
           case 'L':$buchstabe 10;break;
           case 'M':$buchstabe 14;break;
           case 'N':$buchstabe 12;break;
           case 'O':$buchstabe 12;break;
           case 'Ö':$buchstabe 12;break;           
           
case 'P':$buchstabe 9;break;
           case 'Q':$buchstabe 12;break;
           case 'R':$buchstabe 11;break;
           case 'S':$buchstabe 9;break;
           case 'T':$buchstabe 10;break;
           case 'U':$buchstabe 12;break;
           case 'Ü':$buchstabe 12;break;           
           
case 'V':$buchstabe 12;break;
           case 'W':$buchstabe 15;break;
           case 'X':$buchstabe 12;break;
           case 'Y':$buchstabe 12;break;
           case 'Z':$buchstabe 10;break;
           case 'a':$buchstabe 7;break;
           case 'ä':$buchstabe 7;break;           
           
case 'b':$buchstabe 8;break;
           case 'c':$buchstabe 7;break;
           case 'd':$buchstabe 8;break;
           case 'e':$buchstabe 7;break;
           case 'f':$buchstabe 5;break;
           case 'g':$buchstabe 8;break;
           case 'h':$buchstabe 8;break;
           case 'i':$buchstabe 4;break;
           case 'j':$buchstabe 4;break;
           case 'k':$buchstabe 8;break;
           case 'l':$buchstabe 4;break;
           case 'm':$buchstabe 12;break;
           case 'n':$buchstabe 8;break;
           case 'o':$buchstabe 8;break;
           case 'ö':$buchstabe 8;break;           
           
case 'p':$buchstabe 8;break;
           case 'q':$buchstabe 8;break;
           case 'r':$buchstabe 5;break;
           case 's':$buchstabe 6;break;
           case 't':$buchstabe 4;break;
           case 'u':$buchstabe 8;break;
           case 'ü':$buchstabe 8;break;           
           
case 'v':$buchstabe 8;break;
           case 'w':$buchstabe 12;break;
           case 'x':$buchstabe 8;break;
           case 'y':$buchstabe 8;break;
           case 'z':$buchstabe 7;break;
           case '.':$buchstabe 4;break;  
           
case ':':$buchstabe 4;break;  
           
case ',':$buchstabe 4;break;  
           
case ';':$buchstabe 4;break;  
           
case '>':$buchstabe 9;break;  
           
case '<':$buchstabe 9;break;  
           
case '-':$buchstabe 5;break;  
           
case '_':$buchstabe 8;break;  
           
case '#':$buchstabe 8;break;  
           
case '"':$buchstabe 7;break;  
           
case '+':$buchstabe 9;break; 
           case '*':$buchstabe 8;break;  
           
case '~':$buchstabe 9;break;  
           
case '|':$buchstabe 3;break;  
           
case '!':$buchstabe 5;break;  
           
case '§':$buchstabe 8;break;  
           
case '$':$buchstabe 8;break;  
           
case '%':$buchstabe 13;break;  
           
case '&':$buchstabe 12;break;  
           
case '/':$buchstabe 4;break;  
           
case '(':$buchstabe 5;break;  
           
case ')':$buchstabe 5;break;  
           
case '=':$buchstabe 9;break;  
           
case '?':$buchstabe 7;break;  
           
case '`':$buchstabe 5;break;  
           
case '´':$buchstabe 5;break;  
           
case '}':$buchstabe 8;break;  
           
case '{':$buchstabe 8;break;  
           
case ']':$buchstabe 5;break;  
           
case '[':$buchstabe 5;break;  
           
case '/':$buchstabe 4;break;  
           
default:$buchstabe 0;    
        
}
        $einpixel=100/16;
        $neu=$einpixel*$pixel/100;
        $neu=$buchstabe*$neu;
        $zaehlen=$zaehlen+$neu;  
    
}
    echo "Bei $pixel Pixel ist dein Wort $zaehlen Pixel breit";
    echo "<hr>";
    $style="style='width:".$zaehlen."px'";
}else{
    $style='';
    $wort='';
}
?>

<main>

<div id="content">
<h1>Gebe ein Wot an
<form>
<input <?php echo $style?> type="text" name="text" value="<?php echo $wort?>">
<br>
<input type="submit">
</form>
</div>



</main> 
Im ernst,
warum sollte man so etwas gebrauchen können. Zudem kann man das alles via JavaScript lösen.

Code:
document.querySelector('input[name=text]').addEventListener('input', function() {
    let StrLen = this.length;
    let faktor = 20;
    if(StrLen < 4) {
        this.style.width = "230px";
    } else {
        this.style.width = `${StrLen*faktor}px`;
    }
});


Grüsse

rzscout