Monday , 20 November 2017
Home / Programming / JavaScript / Text Fields – Advanced JavaScript Tutorial
Text Fields
Text Fields

Text Fields – Advanced JavaScript Tutorial

In this tutorial, we’ll focus on text fields in our forms. There a couple of events, properties and methods to make working with forms easier.

Selecting Text

Let’s update our document to this.

Alright, let’s clear out our script and add this bit of code.

In our third line, we use a method called select(). This method will select the whole value inside the text field. This will execute when the focus event fires on the myNum field. You’ll also notice we’re using the mouseup event on this field as well. Google Chrome and Safari both implement the select() method differently than the other  browsers. The mouseup event, by default, will deselect all the text after it’s been selected. This is a huge problem if you want the text to always be selected on first click. So, we use the preventDefault() method to keep Chrome and Safari from deselecting our text.

There’s also a select event. Update your script to this.

I remove the select() method and the mouseup event. This is because the select event can’t fire properly with these 2 events in the way. In the above example, we first create a variable called target. This will contain the target from the event object. Next, we have to grab the text that was selected. Sometimes, the user won’t select the whole text field. In such cases, we have to use the properties selectionStart and selectionEnd. Both of these properties contain the position of the start and end character in the selected string.

With those positions, we use the substring() method to grab the selected text. We store the final result in a variable called result. Lastly, we update the div tag with the ID message with the selected text. Try doing this now!

Filtering Data

Let’s take a look at a simple way to filter data. When you have a field where you’ll want numbers, then you don’t want the user to input any non-numeric characters. Here’s how you would do that.

In the above example, we check for the keypress event. Remember, this event will fire every time the user presses a key on their keyboard. This is perfect for what we need. In our anonymous function, we grab the character code. Here’s a link to the list of codes.

http://www.asciitable.com/

If you look at the table, then any numbers between 48 and 57 are considered numbers in JavaScript. So, we simply check if the character code isn’t between these 2 values.  We also do one check to check if the user presses ctrl on their keyboard. We do this because users will be able to copy and paste non-numeric characters into our input field. By checking for this, we can then account for that and prevent it from happening. If any are true, then the block of code inside executes which prevents the default behavior of the text field.

Conclusion

You can do a lot of cool tricks with text fields. You already have all tools you’ll need to do so.

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link