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, 0 insertions, 160 deletions
diff --git a/files/bn/web/api/event/preventdefault/index.html b/files/bn/web/api/event/preventdefault/index.html deleted file mode 100644 index 9c14bd2e12..0000000000 --- a/files/bn/web/api/event/preventdefault/index.html +++ /dev/null @@ -1,160 +0,0 @@ ---- -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> |