How to Get The Text Input Value Using JavaScript Events

The input field has a value property to get the input value in JavaScript. You can use different events to extract the value in order to run data validation and send it to the server.

The main purpose of using HTML input fields is to collect information from users and utilize them in the application. That's why it is important to know different ways to collect values from HTML input fields using JavaScript.

I will also try to explain which is the most optimal way for us in most cases. But you are free to use any of the methods discussed below.

How to Get The Value From Text Input Using JavaScript

When we add a <input> field in our HTML file, we also add some attributes to it. Like, the type attribute represents the type of our input field.

I am creating a text input but you can have a different type of <input> field. It doesn't matter process will be the same.

          <input type="text" placeholder="Enter username" id="username">
        

This input field has an username id. I will use this id value in JavaScript to get the reference object of the field. Every input object has a value property that returns the value.

          const username = document.getElementById('username');

console.log(username.value);
        

But we need to get the value whenever a user enters something in our field. For that, you can use JavaScript events. We can also get the input value on a button click if you want.

These are the following events that we can use to collect values from input fields in JavaScript:

• change event
• input event

Also Read: Input VS Change VS Blur VS Focus - Differences of JavaScript Events

Using change Event to Get The Value From Input

When we listen to the change event on our <input> field, JavaScript only fires off this event when a user changes the input value and removes the focus from the field.

That means when you are typing inside the <input> field, this event will not do anything. Whenever you complete typing and lose focus from the field by clicking anywhere else then it executes.

          const username = document.getElementById('username');

// Using change event
username.addEventListener('change', () => {
    console.log(username.value);
});
        

This is the most used JavaScript event for getting input values. Because this event callback function will not run every time a user types a character. Rather it will execute once when a user is done typing.

In addition to that, when you focus on the <input> field and leave it without changing the current value, this callback function will not run. That means it executes only when the input value changes.

That's why it is great in the case of performance and data validation. It also works if you copy a text and paste it inside the <input> field.

Most of the time, this is what we really need in our application. But if you want to validate the input value every time a user types something, you can use the input event for that.

Also Read: 3 Proven Methods to Create Multi-Line Strings in JavaScript

Using input Event to Get The Value From Input

JavaScript triggers the input event when someone enters a value in the <input> field. We don't have to leave the field. Every time we enter or remove something from the field, this event will fire off.

This is the main difference between input and change events in JavaScript. This event is useful in some situations. For example, we can use it for password validation.

When anyone starts entering a password, you can validate whether it qualifies for the requirement like length, numbers, special characters, etc.

          const username = document.getElementById('username');

// Using input event
username.addEventListener('input', () => {
    console.log(username.value);
});
        

Listen to the input event on the username field and access the value inside the callback function with username.value property. This callback function will also execute if you copy and paste text in the input field.

Also Read: Self Invoking Functions in JavaScript - Why Should You Use?

Can We Use keydown or keyup Events to Get Input Value?

There are other events like keydown and keyup in JavaScript, but these are not great for getting value from the <input> field.

If we use keydown event for our username input field, the callback function will run for any key press. Whenever users press a key on their keyboard, this function will execute.

          const username = document.getElementById('username');

// Using input event
username.addEventListener('keydown', () => {
    console.log(username.value);
});
        

There are some problems with this event. Any key can trigger this event. Like, if you press the shift or ctrl key, this event will fire off. But these keys don't change the input value.

Another problem is that when this callback function executes, we don't get the updated value from username.value property. We get the previous value.

Because JavaScript fires this event even before updating the value property. That's why this event is mostly suitable for getting an immediate response from any key press like creating keyboard shortcuts in JavaScript.

          const username = document.getElementById('username');

// Using input event
username.addEventListener('keyup', () => {
    console.log(username.value);
});
        

The keyup event is almost similar to the keydown event in JavaScript. This event gets fired off when we press any key and release it from our keyboard.

If you press a key and hold it, this event will not do anything. This is the main difference between these 2 JavaScript events.

Another thing is if you use keyup event with the username input field, you will get the updated value from it. Unlike the keydown event, this event updates the value property before executing the callback function.

Also Read: How to Change and Redirect URL to Another Page in JavaScript

Conclusion

In this article, I have discussed 4 JavaScript events. Among them, we should not use keydown and keyup events for their limitations. That's why you can consider the other two depending on the situation.

If you want to get the input value every time users change the value, you should use the input event. But if you want to extract the value after changing and leaving the <input> field, you will apply the change event.

I hope you have understood the differences between these events. Now you can choose any of these events to get the value from an input field in JavaScript.