Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Strange cursor placement in modal when using autofocus in Internet Explorer with HTML
Internet Explorer has a known issue where autofocused elements in fading modals cause strange cursor placement. The cursor may appear in unexpected positions or behave erratically when the modal opens.
The Problem
When using Bootstrap modals with the autofocus attribute on input elements, IE places the cursor incorrectly during the fade transition. This happens because IE handles CSS transitions and focus events differently than other browsers.
Solution 1: Modify CSS Transition
Override the default modal transition to use only opacity changes:
.modal.fade {
transition: opacity .3s linear;
}
This removes the sliding animation that interferes with focus placement in IE.
Solution 2: Force Modal to Show Without Sliding
When initializing the modal, add the in class to bypass the fade transition:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<div class="modal fade in" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Test Modal</h4>
</div>
<div class="modal-body">
<input type="text" class="form-control" autofocus placeholder="This input has autofocus">
</div>
</div>
</div>
</div>
</body>
</html>
Alternative JavaScript Approach
You can also set the window class programmatically:
$('#myModal').modal({
show: true,
windowClass: 'modal fade in'
});
Browser Compatibility
| Browser | Issue Present | Solution Needed |
|---|---|---|
| Internet Explorer 11 | Yes | Yes |
| Edge, Chrome, Firefox | No | Optional |
Conclusion
Both solutions effectively fix IE's cursor placement issue with autofocused modal inputs. The CSS approach is simpler, while the class modification provides more control over individual modals.
173 Views
