代码之家  ›  专栏  ›  技术社区  ›  lunjius

事件仅在应用于多个元素时触发一次

  •  1
  • lunjius  · 技术社区  · 7 年前

    HTML(用户输入前):

    <div id="eventList" class="gap">
            <input id="event1" class="text bold eventBox" type="text" name="event1" placeholder="Ereignis 1" /> <br>
    </div>
    

    Javascript(后来实现;在摘录中):

    function addBox() {
        
        var boxes = document.getElementsByClassName("eventBox");
        
        var id = +getMaxID(boxes, "event") + +1;           // ID of input being created
        
        var list = document.getElementById("eventList");
        
        list.innerHTML = list.innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" /> <br>';
        
        document.getElementById("event" + id).addEventListener("input", resizeEventList);
        
    }
    
    function delBox() {
                
        loadTexts();                // save current inputs
        
        var list = document.getElementById("eventList");
        
        document.getElementById("eventList").innerHTML = '';
        
        var id = 1;
        
        for (var i = 1; i < eventTexts.length; i++) {
            
            if (eventTexts[i].length > 0) {
                
                /* recreate box with its former input (if not empty) */
                
                document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value="' + eventTexts[i] + '"/> <br>';
                document.getElementById("event" + id).addEventListener("input", resizeEventList);
                
                id++;
                
            }
            
        }
        
        /* add new last empty input */
        
        document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value=""/> <br>';
        document.getElementById("event" + id).addEventListener("input", resizeEventList);
        
    }
    
    function resizeEventList(e) {
        
        if (typeof e != 'undefined') {
            
            var boxes = document.getElementsByClassName("eventBox");
            
            if (e.target.id == "event"+getMaxID(boxes, "event") && e.type == 'input') {
                
                /* input into last available box -> add an empty box */
                
                    loadTexts();                // save current inputs
    
                    senderID = e.target.id;     // remember ID of triggering element for resetting focus afterwards
    
                    addBox();                   // add another box
                
                    writeTexts();               // write former inputs back into boxes
                
                    document.getElementById(senderID).focus();     // reset focus
                
            } else if (e.target.value.length == 0 && getID(e.target, "event") < getMaxID(boxes, "event")) {
                
                /* box before last box empty -> delete last empty box */
    
                    senderID = e.target.id;     // remember ID of triggering element for resetting focus afterwards
    
                    delBox();                   // delete all boxes and create X new boxes
                
                    document.getElementById(senderID).focus();     // reset focus
                
            }
            
        }
        
    }
    
    var eventTexts = new Array();
    var senderID;
    document.getElementById("event1").addEventListener("input", resizeEventList);
    

    有人有办法吗?

    <form id="planForm" class="top-margin" method="post" action="new.php?action=add">
    
        <div>
            <input class="text head bold" type="date" name="date" placeholder="Datum" value="<?php echo date("Y-m-d", time());?>" required /> <br>
    
            <div id="eventList" class="gap">
    
                <input id="event1" class="text bold eventBox" type="text" name="event1" placeholder="Ereignis 1" /> <br>
    
            </div>
        </div >
    
    <input type="button" value="Speichern" onclick="save();" /  >
    
    </form>
    
    <script>
    
        function getID(elm, type) {
            if (typeof elm != 'undefined') {
                return elm.id.replace(type, "");
            } else {
                return "";
            }
        }
    
        function getMaxID(list, type) {
    
            currID = 0;
            max = 0;
    
            if (list != null && list.length > 0 && type != null) {
                for (var i=0; i < list.length; i++) {
                    currID = getID(list[i], type);
                    if ( currID > max ) {
                        max = currID;
                    }
                }
            }
    
            return max;
    
        }
    
        function addBox() {
    
            var boxes = document.getElementsByClassName("eventBox");
    
            var id = +getMaxID(boxes, "event") + +1;           // ID of input being created
    
            var list = document.getElementById("eventList");
    
            list.innerHTML = list.innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" /> <br>';
    
            document.getElementById("event" + id).addEventListener("input", resizeEventList);
    
            console.log(document.getElementById("event" + id));
    
        }
    
        function delBox() {
    
            loadTexts();                // save current inputs
    
            var list = document.getElementById("eventList");
    
            document.getElementById("eventList").innerHTML = '';
    
            var id = 1;
    
            for (var i = 1; i < eventTexts.length; i++) {
    
                if (eventTexts[i].length > 0) {
    
                    /* recreate box with its former input (if not empty) */
    
                    document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value="' + eventTexts[i] + '"/> <br>';
                    document.getElementById("event" + id).addEventListener("input", resizeEventList);
    
                    id++;
    
                }
    
            }
    
            /* add new last empty input */
    
            document.getElementById("eventList").innerHTML = document.getElementById("eventList").innerHTML + '<input id="event'+ id +'" class="text bold eventBox" type="text" name="event'+ id +'" placeholder="Ereignis '+ id +'" value=""/> <br>';
            document.getElementById("event" + id).addEventListener("input", resizeEventList);
    
        }
    
        function resizeEventList(e) {
    
            if (typeof e != 'undefined') {
    
                var boxes = document.getElementsByClassName("eventBox");
    
                if (e.target.id == "event"+getMaxID(boxes, "event") && e.type == 'input') {
    
                    /* input into last available box -> add an empty box */
    
                        loadTexts();                // save current inputs
    
                        senderID = e.target.id;     // remember ID of triggering element for resetting focus afterwards
    
                        addBox();                   // add another box
    
                        writeTexts();               // write former inputs back into boxes
    
                        document.getElementById(senderID).focus();     // reset focus
    
                } else if (e.target.value.length == 0 && getID(e.target, "event") < getMaxID(boxes, "event")) {
    
                    /* box before last box empty -> delete last empty box */
    
                        senderID = e.target.id;     // remember ID of triggering element for resetting focus afterwards
    
                        delBox();                   // delete all boxes and create X new boxes
    
                        document.getElementById(senderID).focus();     // reset focus
    
                }
    
            }
    
        }
    
        function loadTexts() {
            var boxes = document.getElementsByClassName("eventBox");
    
            for (var i=0; i < boxes.length; i++) {
                eventTexts[getID(document.getElementById(boxes[i].id), "event")] = boxes[i].value;
            }
        }
    
        function writeTexts() {
            var boxes = document.getElementsByClassName("eventBox");
    
            for (var i=0; i < boxes.length-1; i++) {
                document.getElementById(boxes[i].id).value = eventTexts[getID(boxes[i], "event")];
            }
        }
    
        var eventTexts = new Array();
        var senderID;
        document.getElementById("event1").addEventListener("input", resizeEventList);
    
    </script>
    
    1 回复  |  直到 4 年前
        1
  •  2
  •   lunjius    7 年前

    对于每个想知道解决方案的人:

    使用“insertAdjacentHTML”而不是“innerHTML”动态创建元素。感谢RajeshP提供了这个有用答案的链接: Javascript AddEventListener Fires only once