Search code examples
javascriptionic-frameworkionic5

Ionic 5: How to add event listener to ion-input using Javascript


I am trying to add a event listener to a ion-input so then when there is a change and onkeyup the respective functions execute with the id passed in

Code

<ion-input id="totalTimeOpening" type="text"></ion-input>

<script>
    function testChange(id) {
        console.log(id + " Change");
    }

    function testOnKeyUp(id) {
        console.log(id + " KEYUP");
    }

    document.getElementById("totalTimeOpening").addEventListener('ionChange', testChange.bind('totalTimeOpening'), false);


    document.getElementById("totalTimeOpening").addEventListener('onkeyup', testOnKeyUp.bind('totalTimeOpening'), false);
</script>

The current code seems to pass the whole ion-input object in


Solution

  • I figured this out.

        function testChange(id) {
            console.log(id + " Change");
        }
    
        function testOnKeyUp(id) {
            console.log(id + " KEYUP");
        }
    
    
            document.getElementById("totalTimeOpening").addEventListener('ionBlur', function(){
                testChange('totalTimeOpening')
            });
    
    
            document.getElementById("totalTimeOpening").addEventListener('ionInput', function(){
                testOnKeyUp('totalTimeOpening')
            });
    

    the functions had to go inside function(){here}) and it works. Also the onkeyup won't work with ionic it seems and instead ionInput seems to work as a substitue