Fehler mit HTML und Javascript bei Input Feldern und Timings

[obilaner]

Hallo.

Ich habe mehrere Probleme in meinem HTML / Javascript die auf den ersten Blick keinen Sinn ergeben. Ich habe 2 Input Felder bei denen man eine Nummer eingeben soll. Wenn ich auf plus oder minus drücke fängt html an von alleine bis zum min oder max zu inkrementieren oder zu dekrementieren, je nach dem über welchen button davon die maus hovert. Einfach so eine Zahl einzutragen geht zwar, aber das wäre für meinen Anwendungsfall nicht praktikabel. Auch ist auffällig das in einer Textarea Text den ich eingebe einmalig markiert und auch eingefügt werden kann, aber nach ein paar mal klicken ist es nicht mehr möglich im Textfeld mit der Maus frei den Cursor zu positionieren. Das geht dann nur noch mit der Tastatur. Auch auffällig ist, das bei dieser relativ Javascript lastigen Seite (Es werden viele Funktionen geladen, teilweise in einer Reihe) oft das Speichern oder Laden eines Projektes erst beim 2x reload funktionieren. Oft wird ein Teil (zb ein HTML dummy an dem Codeeingaben vorgeschaut werden) nicht korrekt geladen worden ist, sodass sich zb sein CSS statt auf die ID des dummys auf das übergeordnete Element verteilen, was dazu führt das der Dummy die ganze Seite überspannt, unsichtbar.

Den ganzen Code hier zu posten wäre nicht möglich. Ich habe mal ein kurzes Video von den zwei zunächst relevanten Fehlern gemacht, sowie 2 Screenshots um den Typ des Javas und des Aufbaus etwas zu veranschaulichen.

Was kann dazu führen das das Feld automatisch inkrementiert? Also das zb browserseitig ein vom browser (Nicht von meinem code) verwendetes mouserelease oder so etwas da involviert sein könnte?

Hier der Link zum Fehlervideo:

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

 

[tcmj]

Du hast so viel geschriebe, dass ich nicht weiss ob ich es überlesen habe, aber wo ist denn dein Code?
Poste doch mal nen Github Link.
Ich kann aus dem Video und den Screenshots nicht viel ableiten.
Was benutzt Du überhaupt für Frameworks etc?
Kannst ja auch diesen kleinen Teil extrahieren und mal in ein Mini-Projekt überführen

 

[obilaner]

Das ist glaube ich auch schon das Problem. Alleine der Java Code in der Main Datei ist 900 Zeilen lang und dazu kommen noch per Ajax (Jquery) hinzu geladene php Dateien, die die einzelnen hinzugeladenen Funktionen repräsentieren (HTML vom Editor wird zb ausserhalb der Hauptdatei generiert und dann einfach per selektor.html(callback) in jquery in den Container von Bild 1 (Links das Fenster) geladen, so wie in Bild 2 (rechts).

Ich denke von Teil Code wird man es genau so wenig ableiten können, weil es vermutlich ehr etwas viel Globaleres ist. Das eigentliche HTML das das Input Feld darstellt da kann ja denke ich mal nicht viel falsch sein. Ich probiere es dennoch mal.

1. Der HTML Editor Code der in einen Container geladen wird aus ner externen PHP datei
2. Der Basis Container im Hauptcode, samt hierarchie
3. Javascripts die die funktion betreffen

Es gibt auch noch eine drag.js die Fenster, ua den HTMLeditor bewegen soll, auf wunsch. Der Vollständigkeit halber die noch als Punkt 4

Zu 1:

Spoiler

<div id="htmleditor-inlay">
<div id="modulheader2" style="position: absolute; right: 0rem; top: 0rem; z-index: 99;">
                    <img src="vorlage/drag.png" class="dragbtn" id="dummybilddrag2" style="width: 2rem;  z-index: 99;" onclick="append_drag(2)"></img>
                    <img src="vorlage/edit.png" class="settingsbtn" id="dummybildedit" style="width: 2rem;  z-index: 11;" onclick=""></img>          
</div>
<div id="htmleditor-grid-head">
        <div class="reiter" id="htmleditreiter1" onclick="selecthtmleditorsub(1)">HTML</div>
        <div class="reiter" id="htmleditreiter2" onclick="selecthtmleditorsub(2)">Settings</div>
        <div class="reiter" id="htmleditreiter3" onclick="selecthtmleditorsub(3)">Worker</div>
        <div class="reiter" id="htmleditreiter4" onclick="selecthtmleditorsub(4)">CSS</div>
    </div>
    <div id="htmleditor-grid-mitte">
        <select id="htmleditor-select" class="stylehtmlpanelselect alignhtmlpanel" onchange="copyfont()">
            <option class="stylehtmlpanelselectoption">Schriftart</option>
        </select>
        <div id="htmlpanel_html" class="htmlpanel_init">
        <button class="mofihtml-hor-button alignhtmlpanel">Mofibild</button>
        <button class="mofihtml-hor-button alignhtmlpanel" disabled>Mofibutton</button>
        <button class="mofihtml-hor-button alignhtmlpanel" disabled>Mofiemoticons</button>
        </div>
        <div id="htmlpanel_settings" class="htmlpanel_init">
        <button class="mofihtml-hor-button alignhtmlpanel">Add Settings Element</button> 
        <button class="mofihtml-hor-button alignhtmlpanel"></button>
        <button class="mofihtml-hor-button alignhtmlpanel"></button>
        </div>
        <div id="htmlpanel_worker" class="htmlpanel_init">
        <button class="mofihtml-hor-button alignhtmlpanel">Add Worker Element</button>
        <button class="mofihtml-hor-button alignhtmlpanel">Database</button>
        </div>
    </div>
    <div id="htmleditor-grid-bottom" class="editor">
    <div id="settingsinlaywrapper">
        <textarea id="htmleditor-textfeld" oninput="update_modulcode()">
        </textarea>
 
        <div id="htmleditor-subrechts">
            <div class="substyle" id="sub1">
            <div class="styleheading">Aussehen:</div>             
                    <hr>
                    <div style="position: relative; width: 100%; height: 5vh; ">
                        <div class="subcheckbox_box">
                            <input class="subcheckbox" type="checkbox"></input>                 
                            <div class="subcheckbox_text">Statisch</div>
                        </div>
                        <div class="subcheckbox_box">
                            <input class="subcheckbox" type="checkbox"></input>                 
                            <div class="subcheckbox_text">Unsichtbar</div>
                        </div>
                        <div class="subcheckbox_box">
                            <input class="subcheckbox" type="checkbox"></input>                 
                            <div class="subcheckbox_text">Tp selektor</div>
                        </div>
                        <div class="subcheckbox_box">
                            <input class="subcheckbox" type="checkbox"></input>                 
                            <div class="subcheckbox_text">Color Picker</div>
                        </div>
                        <div class="subcheckbox_box">
                            <input class="subcheckbox" type="checkbox"></input>                 
                            <div class="subcheckbox_text">Theme</div>
                        </div>
                    </div>             
                    <br>
                    <div style="position: relative; width: 100%; height: 2vh; float: left;">
                            <div style="font-size: 1rem; float:left" class="">Resizeable</div>
                            <input style="font-size: 1rem; float:left" class="" type="checkbox" onclick="toggle_minmaxresize()"></input>
                     </div>
                     <br>
                     <div id="showminmaxresize" style="position: relative; font-size: 1rem; margin-left: 6vw; display: none">
                        <input type="number" class="stylehiddennumber" title="max X"></input>
                        <input type="number" class="stylehiddennumber" title="max Y"></input>
                        <input type="number" class="stylehiddennumber" title="min X"></input>
                        <input type="number" class="stylehiddennumber" title="min Y"></input>
                    </div>         
            </div>    
            <br>
            <div class="substyle" id="sub2">     
                <div class="styleheading">Customizing:</div>
                <hr>
                <div class="subcheckbox_box">
                    <input class="subcheckbox" type="checkbox"></input>                 
                    <div class="subcheckbox_text">none</div>
                </div>
            </div>
            <br>
            <div class="substyle" id="sub3">
            <br>
                <div class="styleheading">Single Multi:</div>
                <hr>
                Standart Anzahl:
                <input type="number" class="styleinput" value="5" onchange="updatesavestatus()"></input>
            </div>
            <br>
            <div class="substyle" id="sub4">
            <div class="styleheading">Multimodul:</div>
                <hr>
                Anzahl der Module:
                <input type="number" class="styleinput" min="2" max="50" value="2" onchange="updatesavestatus()"></input>
                <br>
                <br>
                <button id="setmovebtn" onclick="append_drag(1)" class="imgbtn_settings">         
                    <img src="vorlage/drag.png" style="width: 1rem; height: 1rem; margin-right: 0.8rem;"></img>
                    <div id="draglabel">Movable</div>
                    </button>
                <button id="setresize" onclick="append_resize()" class="imgbtn_settings">
                    <img src="img/resize.png" style="width: 1rem; height: 1rem; margin-right: 0.8rem;"></img>
                    resize
                </button>
                <button id="setappendbtn" onclick="prompt_desc()" class="imgbtn_settings">
                📜
                    Set Beschr.
                </button>
                <button id="setappendbtn" onclick="prompt_detail()" class="imgbtn_settings">
                📓
                    Set Detailtext
                </button>
                <br>         
            </div>
    
        <div>
    </div>
</div>

Zu 2:

<?php
session_start();
?>
<link rel="stylesheet" href="editor.css"></link>
<script src="../../jquery.min.js"></script>
<script src="drag.js" id="dragscript"></script>
<script src="editor.js"></script>
<div id="Hintergrund">
<img id="profilmoduleditor-hintergrund" src="img/hgme(2).jpg"></img>
<img src="img/giphy.gif" style="position: absolute; left: 100px; top: 15px; z-index: 1"></img>
</div>
<script>
readfonts();
</script>
<div id="Fonts">
<!-- Fonts Laden! Nicht löschen -->
</div>
<div id="Neuesmodul"></div>
<div id="Moduleditor">
        <!-- Projektbilder -->
        <div id="projektbilder" class="drag_editor">
        </div>
        <!-- Modulliste -->
        <div id="modulliste" class="drag_editor">
            <div class="editorsub-header">
                <button class="modulliste-hor_button" onclick="neuesmodul(0)">Neu</button>
                <button class="modulliste-hor_button disabledload" disabled onclick="load('pre')">Laden</button>
                <button class="modulliste-hor_button disabledload" onclick="del()">Löschen</button>
                <button class="modulliste-hor_button" onclick="test()">test</button>
         
                <select class="modulliste-selectmodultyp">             
                    <option>Dekoration</option>
                </select>
            </div>
            <div id="modulliste-bottom">
                <div id="modulliste-bottomgrid">
                    <div id="modulliste-left"></div>
                    <div id="modulliste-right">
                        <div id="modulliste-bild"></div>
                        <div id="modulliste-titel"></div>
                        <div id="modulliste-beschreibung"></div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Dateimanager -->
        <div id="profileditor-filemanager" class ="drag_editor">
        <div class="filemangrid">
            <div id="filemangrid-head">
                <button class="filemanhead-button" onclick="displayupload()">Upload</button>
            </div>
            <div id="filemangrid-bottom">
                    <div id="filemanbottom-head">Kein Modul geladen</div>
                    <div id="filemanbottom-bottom">
                </div>
            </div>     
        </div> 
        </div>

        <!-- Contextmenu -->
        <div id="filecontext" onmouseleave="closecontext()" hidden>
            <div id="fc-images" class="contextsub"  hidden>
            <div class="contextbit" onclick="filemancontext(11)">Namen kopieren</div>
            <div class="contextbit" onclick="filemancontext(2)">Set Deckblatt </div>
            <div class="contextbit" onclick="filemancontext(31)">Rename </div>
            <div class="contextbit" onclick="filemancontext(41)">Löschen </div>
            </div>
            <div id="fc-files" class="contextsub" hidden>
            <div class="contextbit" onclick="filemancontext(12)">Namen kopieren</div>
            <div class="contextbit" onclick="filemancontext(32)">Rename </div>
            <div class="contextbit" onclick="filemancontext(42)">Löschen </div>
            </div>
        </div>
 
        <!-- Projektbeschreibung -->
        <div id="projektbeschreibung" class="drag_editor" style="position: absolute" onclick="klickfrei()">
        </div>

        <!-- black dot -->
        <div id="blackdot" >
        </div>

        <!-- html editor -->
        <div id="profilmoduleditor-htmleingabe" class="" > 
        </div>

        <!-- Status Save [link1]-->
        <div id="profilmoduleditor-statussave" class="drag_editor disabledload" style="display: none;">
        <button class="statussaveitem" id="Save" onclick="savemodul()" disabled>Speichern 💾</button>   
        <div class="statussaveitem pulsate2" id="Saved"></div>
        </div>
</div>
<!-- Uploadfenster -->
<div id="uploadframe" class="drag_editor">
<img src="close_oval.png" id="closeupload" onclick="closeupload()"></img>
        <div id="upload-header"></div>
            <center><br><br>
            <img src="upload.png" id="uploadbild"></img><br>
            <input type="file" id="fileinput" onchange="uploadfiles()"></input>
            </center>
        </div>

Zu 3:

function init(){
    clearcache();
    load_editorpositions();
    modulliste_loadliste();
    load_htmleditor();//50,
    readfontlist();     
}

function append_drag(sw){
    c = details["anzahl"];
    //reloaddrag
 
    if(sw==2){
        if(dragtogglehtmleditor == false){
            $("#profilmoduleditor-htmleingabe").addClass("drag_editor");
            $("#dummybilddrag2").addClass("pulsate");    
            dragtogglehtmleditor = true;
        }else if(dragtogglehtmleditor == true){
            $("#profilmoduleditor-htmleingabe").removeClass("drag_editor");
            $("#dummybilddrag2").removeClass("pulsate");
            dragtogglehtmleditor = false;
        }
    } 
 
        if(sw==1){
     
                if(dragtogglemodul == false){
                        $(".mofimodul").addClass("drag_editor");
                        $("#setmovebtn").css("background-color","#d4fcb1");
                        $("#setmovebtn").addClass("pulsate3");                       
                        dragtogglemodul = true;
                        }
                else if(dragtogglemodul == true){             
                        $(".mofimodul").removeClass("drag_editor");
                        $("#setmovebtn").css("background-color","");
                        $("#setmovebtn").removeClass("pulsate3");
                        dragtogglemodul = false;
                        }
                }
reloaddrag();
}
function reloaddrag(){
    // dragscript
    $("#dragscript").remove();
    $("Head").append('<script src="drag.js" id="dragscript" class="reloaded-woll"></script>');
}
function save_editorpositions(sende){
    $.post("data/editorpositions.php", {write: sende}, function(re){
        //displaynotice(re, 4); 
    });
}
function load_editorpositions(){
    $.post("data/editorpositions.php", {load: ""}, function(re){
    parsedpositions = JSON.parse(re);
      for ( var index in parsedpositions){
            positions[index] = {};
            positions[index]["x"] = parsedpositions[index]["x"];
            positions[index]["y"] = parsedpositions[index]["y"];
            $("#"+index).css("left", positions[index]["x"]);
            $("#"+index).css("top", positions[index]["y"]);
        } 
    });
}
// [HTML Editor]
function selecthtmleditorsub(sw){
    $(".reiter").css("background-color", "rgb(249, 187, 211)");
    $(".htmlpanel_init").hide();
    $("#htmleditor-textfeld").css("width", "100%");
    $("#htmleditor-subrechts").hide();
 
    switch(sw){
        case 1:
            $("#htmleditreiter1").css("background-color", "rgb(224, 101, 150)");
            $("#htmleditor-textfeld").val(details["html"]);
            activesite = "html";
            $("#htmlpanel_html").show();     
            // htmlpanel_html
            break;
        case 2:
            $("#htmleditreiter2").css("background-color", "rgb(224, 101, 150)");
            $("#htmleditor-textfeld").val(details["settings"]);
            activesite = "settings";
            $("#htmlpanel_settings").show();
            $("#htmleditor-textfeld").css("width", "60%");
            $("#htmleditor-subrechts").show();
     
            $("data/htmleditor_settings.php", {get: modultyp}, function(re){
                $("#htmleditor-subrechts").html(re);
            });
            // htmleditor-subrechts
            break;
        case 3:
            $("#htmleditreiter3").css("background-color", "rgb(224, 101, 150)");
            $("#htmleditor-textfeld").val(details["worker"]);
            $("#htmlpanel_worker").show();
            activesite = "worker";
            break;
        case 4:
            $("#htmleditreiter4").css("background-color", "rgb(224, 101, 150)");
            $("#htmleditor-textfeld").val(details["css"]);
            activesite = "css";     
            break;
    }
}
function load_htmleditor(){
    $.post("data/htmleditor.php", {}, function(re){
        $("#profilmoduleditor-htmleingabe").html(re);
    });
}

Zu Punkt 4: -> Drag.js
Diese wird wenn ein move button geklickt wird an das mainfile appendiert und wieder entfernt danach

$(document).ready(() => {
var idtmp = "";
    $(document).on('mousedown', '.drag_editor', function(event) {
        let posX = event.clientX - $(this).offset().left;
        let posY = event.clientY - $(this).offset().top;
        let draggable = $(this);
        idtmp = $(this).prop("id");
     
 
    $(window).on('mouseup', (e) => {
      e.preventDefault();
      $(window).off('mousemove');
    });
 
    $(window).on('mousemove', (e) => {
      e.preventDefault();
      let newX = e.clientX - posX;
      let newY = e.clientY - posY;
      draggable.css('left', newX);
      draggable.css('top', newY);
 
    finalX = newX / $(window).width() * 100;
    finalY = newY / $(window).height() * 100;
 
    if(!positions[idtmp]){
      positions[idtmp] = {};
   
      positions[idtmp]["x"] = finalX.toFixed(2)+"vw";
      positions[idtmp]["y"] = finalY.toFixed(2)+"vh";
    }else{   
      positions[idtmp]["x"] = finalX.toFixed(2)+"vw";
      positions[idtmp]["y"] = finalY.toFixed(2)+"vh";
    }
 
 
    var sendpositions = JSON.stringify(positions);
 
    save_editorpositions(sendpositions);
    });     
    });
});

 

[obilaner]

Update:

Spoiler

Ich hab noch was rumgetestet und festgestellt: Erstens tritt der Bug nur bei Chrome auf, nicht bei Firefox. Zweitens tritt er nur auf, nach dem ein paar JS Funktionen verwendet worden sind und nach manchen nicht. So löst zb das selektieren eines Moduls (Färbt nur das Listentextitem bold und schreibt selected um) den Fehler aus, Jedoch der button 'movable on' zuerst nicht (Es färbt das CSS und appendiert eine klasse dragable) - es funktioniert zunächst. Jedoch nach dem bewegen von irgendetwas ...

Dann tritt der Fehler mit dem selbstinkrementierenden Nummerfeld auf.

Gleich nach dem start der seite und dem grundlegenden Init (Laden von allem möglichen inkl der positionen in js) funktioniert zunächst noch alles normal.

Update 2:
Ich konnte den Fehler bis auf die drag.js funktion zurückführen. Diese ist zwingend erlässlich für die funktionsweise der Seite. Die Seite erstellt / stellt module bereit in form von vierecken (Wie zb Youtube Videos, Freie Texte, verschiebbare Bilder, Animierte Dingsbums, ...). Jeder Mensch braucht vierecke.

Kann das jemand sehen in der drag.js was da den Fehler verursachen könnte? Es arbeitet ja mit Maus und klick

Ich hab mit einem Teil code von ChatGPT das drag.js zusammengebastelt und hatte ehrlich gesagt etwas probleme damit. Wollte zuerst das von Jquery verwenden, das unterstützt neuerdings von Haus aus draggable, aber hatte auch damit Probleme.

Habe jetzt alles soweit ausgeschlossen bis auf die Funktion drag.js. Entferne ich sie geht alles.

Update 3: Wuhu, ich habs gelöst. Wenn nur manchmal alle Dinge so einfach wären. Wenn ein Maus release mal nicht funktioniert in eurem Code, haltet danach ausschau ob eine KI irgendwo 'mouseup.preventdefault' geschrieben hat.

 

[floq0r]

Wenn ein Maus release mal nicht funktioniert in eurem Code, haltet danach ausschau ob eine KI irgendwo 'mouseup.preventdefault' geschrieben hat.

Ok danke

 

[SheepShaver]

Schöne neue Welt. Will jetzt niemand mehr richtig was lernen, und nur noch die KI bemühen? Aber dann bitte auch die KI nach der Fehlerbehebung fragen und nicht hier.