From 95aca4b4d8fa62815d4bd412fff1a364f842814a Mon Sep 17 00:00:00 2001 From: Ryan Johnson Date: Thu, 29 Apr 2021 16:16:42 -0700 Subject: remove retired locales (#699) --- files/bn/web/api/event/preventdefault/index.html | 160 ----------------------- 1 file changed, 160 deletions(-) delete mode 100644 files/bn/web/api/event/preventdefault/index.html (limited to 'files/bn/web/api/event/preventdefault') 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 ---- -
{{apiref("DOM")}}
- -

The {{domxref("Event")}} interface's preventDefault() 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. 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.

- -

As noted below, calling preventDefault() for a non-cancelable event, such as one dispatched via {{domxref("EventTarget.dispatchEvent()")}}, without specifying cancelable: true has no effect.

- -

Syntax

- -
event.preventDefault();
-
- -

Examples

- -

Blocking default click handling

- -

Toggling a checkbox is the default action of clicking on a checkbox. This example demonstrates how to prevent that from happening:

- -

JavaScript

- -
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);
- -

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>
- -

Result

- -

{{EmbedLiveSample("Blocking_default_click_handling")}}

- -

Stopping keystrokes from reaching an edit field

- -

The following example demonstrates how invalid text input can be stopped from reaching the input field with preventDefault(). Nowadays, you should usually use native HTML form validation instead.

- -

HTML

- -

Here's the form:

- -
<div class="container">
-  <p>Please enter your name using lowercase letters only.</p>
-
-  <form>
-    <input type="text" id="my-textbox">
-  </form>
-</div>
- -

CSS

- -

We use a little bit of CSS for the warning box we'll draw when the user presses an invalid key:

- -
.warning {
-  border: 2px solid #f39389;
-  border-radius: 2px;
-  padding: 10px;
-  position: absolute;
-  background-color: #fbd8d4;
-  color: #3b3c40;
-}
- -

JavaScript

- -

And here's the JavaScript code that does the job. First, listen for {{domxref("Element/keypress_event", "keypress")}} events:

- -
var myTextbox = document.getElementById('my-textbox');
-myTextbox.addEventListener('keypress', checkName, false);
-
- -

The checkName() function, which looks at the pressed key and decides whether to allow it:

- -
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"
-      );
-    }
-  }
-}
-
- -

The displayWarning() function presents a notification of a problem. It's not an elegant function but does the job for the purposes of this example:

- -
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);
-}
- -

Result

- -

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

- -

Notes

- -

Calling preventDefault() 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.

- -

You can use {{domxref("Event.cancelable")}} to check if the event is cancelable. Calling preventDefault() for a non-cancelable event has no effect.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}Initial definition.
- -

Browser compatibility

- - - -

{{Compat("api.Event.preventDefault")}}

-- cgit v1.2.3-54-g00ecf