preventDefault() not working for change event

javascript onchange preventdefault
SlimJim picture SlimJim · Jun 16, 2014 · Viewed 17.2k times · Source

Any ideas why preventDefault is not working? Here's the code below . . . Tks!

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

    $(document).ready(function() {
        $("#text1").change(function(e) {
             e.preventDefault();
        });
    });

function myFunc() {
    alert("Random, annoying alert");
}

</script>
</head>

Just one HTML element in the form:

<body>
<form name="test" method="post">
    <input name="text1" id="text1" type="text" onchange="myFunc();">
</form>
</body>

Answer

Fiambre picture Fiambre · Jun 16, 2014

You can’t use preventDefault on change events because it’s not cancelable:

$("#text1").change(function(e) {
    alert(e.cancelable?"Is cancelable":"Not cancelable");
});

The cancelable property is true only on events that can be prevented.

Related questions

How to pass parameters on onChange of html select

I am a novice at JavaScript and jQuery. I want to show one combobox-A, which is an HTML <select> with its selected id and contents at the other place on onChange(). How can I pass the complete combobox …

Read More
How to fire a change event on a HTMLSelectElement if the new value is the same as the old?

I have the following markup: <select onchange="jsFunction()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> When a user pulls down the …

Read More
onchange event on input type=range is not triggering in firefox while dragging

When I played with <input type="range">, Firefox triggers an onchange event only if we drop the slider to a new position where Chrome and others triggers onchange events while the slider is dragged. How can I make …

Read More