ENTER keydown在IE中不起作用！ 角

Question

I have an input field where users insert a video url, and when press 'enter', video player display that video. It works fine in Chrome, Firefox, Edge but doesn't work in IE 11. It starts working only if I open the IE developer tools and then go back to page to press enter.

Here is my code

HTML

<form>
    <label for="videoUrlField">Paste your video URL here: </label>
    <input autocomplete="off" type="url" id="videoUrlField" enter-listener>
</form>

Controller.js

app.directive('enterListener', function () {
return {
    restrict: 'A',
    link: function (scope, element, attr) {
        element.bind("keydown", function (event) {

            var validURL = function (str) {
                var urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/;
                return urlregex.test(str);
            };

            if (event.which === 13) {
                    var videoUrl = ''+element.val()

                    //if url is valid then let's load it
                    if(validURL(videoUrl)) {
                        playApropriateType(videoUrl);
                    }
                    else{alert("Wrong URL")}
            }
        })
    }
}

});

Could anyone tell me what is wrong with IE or my code?

Answer 1

Angular supports ng-submit for forms out of the box. Have you tried ngSubmit on your form element?

<form ng-submit="myEnterFunction()">
    <label for="videoUrlField">Paste your video URL here: </label>
    <input autocomplete="off" type="url" id="videoUrlField" enter-listener>
</form>

Where myEnterFunction() can be a controller function to handle / validate / ... upon enter. In my opinion a much cleaner and more AngularJS way to go.

Basic example PLUNKER