diff options
Diffstat (limited to 'files/bn/web/api/event/preventdefault/index.html')
| -rw-r--r-- | files/bn/web/api/event/preventdefault/index.html | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/files/bn/web/api/event/preventdefault/index.html b/files/bn/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..9c14bd2e12 --- /dev/null +++ b/files/bn/web/api/event/preventdefault/index.html @@ -0,0 +1,160 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - b +translation_of: Web/API/Event/preventDefault +--- +<div>{{apiref("DOM")}}</div> + +<p><span class="seoSummary">The {{domxref("Event")}} interface's <strong><code>preventDefault()</code></strong> method tells the {{Glossary("user agent")}} that if the event does not get explicitly handled, its default action should not be taken as it normally would be.</span> The event continues to propagate as usual, unless one of its event listeners calls {{domxref("Event.stopPropagation", "stopPropagation()")}} or {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}, either of which terminates propagation at once.</p> + +<p>As noted below, calling <code><strong>preventDefault()</strong></code> for a non-cancelable event, such as one dispatched via {{domxref("EventTarget.dispatchEvent()")}}, without specifying <code>cancelable: true</code> has no effect.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>event</em>.preventDefault(); +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Blocking_default_click_handling">Blocking default click handling</h3> + +<p>Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:</p> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.querySelector("#id-checkbox").addEventListener("click", function(event) { + document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>"; + event.preventDefault(); +}, false);</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Please click on the checkbox control.</p> + +<form> + <label for="id-checkbox">Checkbox:</label> + <input type="checkbox" id="id-checkbox"/> +</form> + +<div id="output-box"></div></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p> + +<h3 id="Stopping_keystrokes_from_reaching_an_edit_field">Stopping keystrokes from reaching an edit field</h3> + +<p>The following example demonstrates how invalid text input can be stopped from reaching the input field with <code>preventDefault()</code>. Nowadays, you should usually use <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">native HTML form validation</a> instead.</p> + +<h4 id="HTML_2">HTML</h4> + +<p>Here's the form:</p> + +<pre class="brush: html"><div class="container"> + <p>Please enter your name using lowercase letters only.</p> + + <form> + <input type="text" id="my-textbox"> + </form> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<p>We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:</p> + +<pre class="brush: css">.warning { + border: 2px solid #f39389; + border-radius: 2px; + padding: 10px; + position: absolute; + background-color: #fbd8d4; + color: #3b3c40; +}</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>And here's the JavaScript code that does the job. First, listen for {{domxref("Element/keypress_event", "keypress")}} events:</p> + +<pre class="brush: js">var myTextbox = document.getElementById('my-textbox'); +myTextbox.addEventListener('keypress', checkName, false); +</pre> + +<p>The <code>checkName()</code> function, which looks at the pressed key and decides whether to allow it:</p> + +<pre class="brush: js">function checkName(evt) { + var charCode = evt.charCode; + if (charCode != 0) { + if (charCode < 97 || charCode > 122) { + evt.preventDefault(); + displayWarning( + "Please use lowercase letters only." + + "\n" + "charCode: " + charCode + "\n" + ); + } + } +} +</pre> + +<p>The <code>displayWarning()</code> function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:</p> + +<pre class="brush: js">var warningTimeout; +var warningBox = document.createElement("div"); +warningBox.className = "warning"; + +function displayWarning(msg) { + warningBox.innerHTML = msg; + + if (document.body.contains(warningBox)) { + window.clearTimeout(warningTimeout); + } else { + // insert warningBox after myTextbox + myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling); + } + + warningTimeout = window.setTimeout(function() { + warningBox.parentNode.removeChild(warningBox); + warningTimeout = -1; + }, 2000); +}</pre> + +<h4 id="Result_2">Result</h4> + +<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p> + +<h2 id="Notes">Notes</h2> + +<p>Calling <code>preventDefault()</code> during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a result of the event will not occur.</p> + +<p>You can use {{domxref("Event.cancelable")}} to check if the event is cancelable. Calling <code>preventDefault()</code> for a non-cancelable event has no effect.</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Event.preventDefault")}}</p> |