In Internet Explorer 11, the input event in VueJS may not be triggered upon the first input

I am working with an input HTML element that has @input="onInput" assigned to it.

Within the onInput method, I have console log output set up, specifically I am logging event.currentTarget.value. However, I've noticed a strange behavior in IE11 - when I focus on the input and then press any button or use ctrl+v, there is no output in the console the first time. It's only upon the second try that the handler is called and event.currentTarget.value contains the full string.

This issue seems to be specific to IE11. Has anyone come across a workaround for this problem?

javascriptvue.jsvuejs2internet-explorer-11

Answer №1

Internet Explorer lacks robust support for the input event on certain types of form fields:

<select> does not trigger input events. Input events are not triggered when checking or unchecking a checkbox or radio button. https://caniuse.com/#search=oninput

Furthermore,

[IE] completely disregarded the input event [for range inputs.] The change event functioned similarly to how the input event worked on other browsers

If you require per-key handling, you can use the keyup event as an alternative (though this doesn't cover paste operations), or opt for the change event if waiting until the user has finished entering data is acceptable.

Answer №2

After some investigation, I discovered that the issue was caused by me setting the placeholder to an empty string. Essentially, I had a custom component that served as a wrapper for the <input> element. Within this component, I had a default placeholder property that was initially set to an empty string and applied to the <input> tag.

Upon updating the placeholder property to null by default, the problem was resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with the active class in vue-router when the route path includes "employees/add"?

I'm currently developing a project using Vue and implementing vue-router for navigation. A peculiar behavior occurs when the route changes to /employees - only the Employees menu item is activated. However, when the route switches to /employees/add, b ...

javascriptvue.jsvue-router

Discovering a way to retrieve objects from an array of objects with matching IDs

Here is a code snippet I put together to illustrate my objective. arr = [ { id:1 , name:'a', title: 'qmummbw' }, { id:2 , name:'b', title: 'sdmus' }, { id:2 , name:'', title: 'dvfv' }, ...

javascripttypescriptecmascript-6

Deleting occurrences of a specific text from a JSON document and subsequently analyzing its contents

I am having an issue with a JSON file in which there are strings of characters attached to many of the field names. This is making it difficult for me to target those objects in JS. The structure looks like this: "bk:ParentField": { "bk:Field": "Va ...

javascriptjsonnode.jsparsingfs

Improving the efficiency of my conditions in a function with Vue JS

Does anyone have any suggestions on how to optimize this function? I feel like it could be shortened to improve its efficiency. Any help or advice would be much appreciated. Function: onStudentActionSelect: function () { if (this.selectedRows.length ...

javascriptperformancefunctionvue.jsvuejs2

Display the names of files depending on the selection made in the drop-down menu

In order to utilize a value from a select box for a PHP function later on the page, I am seeking assistance. Within my index.php file, there is a standard select drop down containing folder names as values and options. After selecting a folder, I aim to e ...

javascriptphpjqueryhtmlajax

What are the steps to resolving an issue with importing a css file in next.js?

Error: ./node_modules/quill-emoji/dist/quill-emoji.css ModuleParseError: Module parse failed: Unexpected character '�' (1:0) You may need a suitable loader for handling this file type, as there are currently no configured loaders to process it. ...

javascriptreactjsbabeljsnext.js

JQuery Ajax Success does not fire as expected

I am facing an issue with my ajax call where the success function is not getting triggered. My controller gets called and the code executes without any errors. However, since my method returns void, I am not returning anything. Could this be the reason why ...

javascriptjqueryajaxasp.net-mvc

Guide on incorporating pinching gestures for zooming in and out using JavaScript

I have been working on implementing pinch zoom in and out functionality in JavaScript. I have made progress by figuring out how to detect these gestures using touch events. var dist1=0; function start(ev) { if (ev.targetTouches.length == 2) {//checkin ...

javascripthtml

Utilize PHP's file_get_contents to trigger the Google Analytics tracking pixel

For certain goals I have set up in Google Analytics, I am unable to use the JavaScript tracking. Instead, I am interested in achieving the same result by making a call with PHP. One solution that seems straightforward to me is to invoke the URL of the tra ...

javascriptphpgoogle-analytics

Obtain a PDF file using jsPDF within an iOS Progressive Web Application

For my bachelor thesis, I am working on developing a PWA. One part of the application involves generating PDF reports using jsPDF and saving them with doc.save("filename.pdf"). This feature works flawlessly on desktop browsers and all Android devices I hav ...

iosvue.jsdownloadprogressive-web-appsjspdf

Could there be a more efficient method to enable support for all video formats?

I have a case statement in my video validation function that checks for specific file extensions of video formats. However, I am wondering if there is a shorter way to write the code in order to allow all video formats instead of creating a long list of al ...

javascriptjquerycase

Is there a way to disable a JavaScript hover effect when the mouse moves away?

I came across this JavaScript code that swaps the background of a parent div when clicking on a link in a child div. However, I noticed that the hover state remains even after moving the mouse out of the link. Can someone help me modify the code so that ...

javascripthtmlcss

How to implement PayPal integration in PHP

I am currently working on integrating the paypal payment system into a website dedicated to pet adoption. Initially, I had a basic code structure that was functional. However, after making some modifications and additions to the code, it no longer redirect ...

javascriptphpjquerypaypal

Error Message: Execution Not Recognized and Missing Requirement

After going through numerous threads, I couldn't find a solution to my specific issue. It's quite unclear what I've installed or uninstalled, but I'm hoping that this error message and its details might provide some clarity. Even though ...

javascriptnode.jsexpressnpmmean.io

`Loading CSS files in Node.js with Express``

My CSS isn't loading properly when I run my HTML file. Even though the HTML is correctly linked to the CSS, it seems like express and node.js are not recognizing it. I find it confusing to understand the articles, tutorials, and stack overflow questio ...

javascripthtmlcssnode.jsexpress

Is there a way to keep the text animation going even when I'm not hovering over it with the cursor?

Is there a way to make text continue animating on the page even when the cursor is not placed on it? I understand the hover function, but how can I ensure the text keeps animating without interruption? $(document).ready(function () { $("#start&q ...

javascripthtmljquerycss

Using AngularJS in conjunction with Ruby on Rails is causing compatibility issues

Trying to implement Angular with Ruby on Rails is presenting some challenges. While simple expressions like 1+1 work fine, binding a number or string to a scope seems to be causing issues. I am looking for suggestions on how to resolve this problem. app. ...

javascriptruby-on-railsangularjsruby

Upon exchanging data with the router located in the navigation bar, a continuous loop occurs as I initiate the download operation involving the electron-dl and electron-download-manager tools

When I switch to the router in the navbar, a loop occurs when I try to initiate the download process. I've been struggling with this issue for the past 2 days and can't seem to find a solution. function downloaddosya1() { console.log("Fi ...

javascriptvue.jselectron

Is there a way to overlay a 'secret' grid on top of a canvas that features a background image?

I am currently working on developing an HTML/JS turn-based game, where I have implemented a canvas element using JavaScript. The canvas has a repeated background image to resemble a 10x10 squared board. However, I want to overlay a grid on top of it so tha ...

javascripthtmlcss

Trigger the Material UI DatePicker to open upon clicking the input field

I have a component that is not receiving the onClick event. I understand that I need to pass a prop with open as a boolean value, but I'm struggling to find a way to trigger it when clicking on MuiDatePicker. Here is an image to show where I want to ...

javascripttypescriptmaterial-ui