“But It’s Against My Nature!” —
Overriding Javascript and Html Default Behavior - A Journal Entry
Today we will be discussing Html and its default behavior to remember the data that was entered by the user on the <input> field of a website. We will also be discussing JavaScript and its default behavior to automatically reload a new website form when an event interface is interacted with by a user agent.
At the writing of this blog entry, I would consider myself a certified newbie to the world of coding and programming and I am currently learning JavaScript and Html.
I am your everyday programming learner who seems to be as equally confused by when his code breaks as when it works. However, I have stumbled upon something I felt compelled to discuss, feeling the need to retain it in a blog for reference to help others learning just like me. While building programs via the front-end languages of JavaScript and Html, I have discovered there is a handful of default behaviors that occur. Who knew that Javascript and Html had instinctual behavior that run without our (the coder’s) command — hey, I am new alright I’m allowed to be surprised. But naturally I wanted to find out more. Usually we have to override these if we want to make our webpage work a specific way. As a result having knowledge of these behaviors and knowing how to control them is even more beneficial.
What is an “<input>” field —
You know those blank boxes that accept personal information on the checkout page of any online shopping platform. Yeah. Simply put, those are <input> fields and an input field is known as an Html element or a tag in Html in which webpage data is placed inside of like this:
<p>Hello World</p> Although for <input> fields, syntax defining the <input> is usually written inside the ‘carrots’ like this:
<input name=“Username” id= “Username”>Input fields, specifically, accept user data in the form of text.
What is the “default behavior” —
<input> fields in Html automatically save the history of user accepted data in a dropdown menu that shows up when you click them. This nifty little feature can be quite convenient for an otherwise tedious effort of typing the same thing countless times to make sure the <input> is responding to user data. It can also be convenient for when your average user needs to fill out a large number of input boxes or provide the same input more than once. There are other Html elements and they do not log user data in the same way. These other elements are the <textarea>, the <select>, and the <form> elements, but for the sake of time we will stick to using <input> fields as our general example. Toggling the autocomplete Html attribute “off” as we will discuss shortly will stop this default behavior from happening removing the dropdown menu of memorized data and instead returns nothing when the input is clicked on the website. But why all of a sudden would we not want our <input> field to remember user data? well maybe you are a banking website and do not want your <input> fields to remember user account data for security/privacy reasons or you are the server of a Massively Multiplayer Online Game (MMOG) and reject the default for the same reasons.
What is “Autocomplete” —
Naturally, Html stores the accepted data from the user in the <input> field history automatically. An implicit function known as autocomplete, that does not need to be written when defining an <input> field, displays the previous user data in a prompt to quickly repopulate the <input> field. “Autocomplete” is an Html attribute or in other words a built in function that the Html language recognizes to change the appearance or behavior of its elements. To disable the autocomplete we need to manually call upon it in the <input> field syntax as a new parameter like this:
<input name=“Username” id= “Username” autocomplete="">Right now it still will allow <input> field history because it hasn’t been told to be off. To tell the autocomplete to be off we need to write off within the quotations in the autocomplete equals like so:
<input name=“Username” id= “Username” autocomplete="off">Now imagine you have just designed an Html script to prompt a user with a “username” and “password” <input> field. With the autocomplete attribute you have just designed a webpage that protects the first user’s “username” and “password” from being reviewed by a subsequent user. Usually on webpages in the real world, the “username’s” autocomplete attribute is left alone while the “password’s” autocomplete attribute is the one to be disabled.
Alright, we’ve thoroughly understood a particular default behavior of <input> fields in an Html form, now let’s discuss the default behavior of JavaScript forms based on an event interface.
What is an “event” interface—
An event interface represents a occurrence or “event” that takes place in the Document Object Model, the DOM being an Application Programming Interface or API that is used to define the logical structure and the way a document is accessed and manipulated. Simply put, the DOM is the behind-the-scenes factory that manifests the webpage you can see and interact with as the user and the event interface is responsible for causing something to happen there. The event interface could be triggered by clicking or pressing a key on your keyboard. DOM is displayed in html and its elements such as <div> , <button> , <span> , etc. can all be connected to an event by a listener. This listener waits for action to be taken by user or programmatically and executes code in response or (“handles”) them, dubbing the term Event-handlers. Here are examples of Event-handlers:
- addEventListener()
- removeEventListener()
and these are meant to respond to user interaction with the webpage.
What is the “default behavior” —
Just bear with me because default behavior requires an example to add context to what default behavior is. I will walk you through the function an Event-handler and mention default behavior as I go along. This is the example of the syntax of an Event-handler function. I will briefly explain. We will need both the JavaScript and Html code to explain this.
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>
The JavaScript code calls on the Html document and using the method querySelector selects the “id” element known as id-checkbox from the Html <input> code. “Id” elements based Html are identified with a # in JavaScript. To document.querySelector("#id-checkbox") we are then adding an addEventListener event with a parameter of ("click") that enables the second parameter Function() to run the (event) . Virtually this addEventListener makes the id-checkbox wait for an action to be done to it in this case a ("click") before it reacts and runs the function(event) event. Within the function(event) we are once again calling on the Html document and using the getElementById method, a method to select the Html "output-box" that bypasses having to identify the "output-box" “id” with a # . getElementById can only be used to reference or select “id” elements in Html. To document.getElementById("output-box") we add .innerHTML to have access to and effectively change the default behavior of the Html “checkbox” <input> type. If we were to open the DOM as a webpage The Html “checkbox” <input> type looks like an online checkbox that accepts checks when clicked on. The “checkbox” <input> type naturally accepts checks when clicked but .innerHTML specializes it in the case of this function(event) to not accept them and instead print the text "Sorry! <code>preventDefault()</code> won't let you check this!<br>"; when clicked, which looks like this when printed:
“Sorry! preventDefault() won't let you check this!”. Once the checkbox has been clicked and the function has been performed Javascript’s natural knee jerk reaction is to reload the form or webpage to prepare for the next event. To prevent this default behavior we reference the “keyword” of the function (event) and add to the keyword .preventDefault() . We initialize event.preventDefault(); Within the function(event) so that it instructs the entire function’s behavior to not reload the page after operation.
With this code we are essentially countering two different default behaviors, one in the Html that initializes a “Checkmark” in the Html “checkbox” <input> and one in the JavaScript that refreshes the Webpage form after performing an event when the “checkbox” was clicked.
What is “preventDefault()” —
preventDefault() is a method added to an event interface which instructs the event to not follow its default behavior. In our example it is used to prevent the webpage from defaulting to refresh itself after performing our function. Refreshing would effectively wipe away evidence of the function having ran. In our example with the method preventDefault() defined, we are able to stop the page from refreshing and report the evidence that our checkbox was clicked prompting the message :
“Sorry! preventDefault() won't let you check this!”.to be successfully displayed.
