Input field, using jQuery autocomplete, sometimes loses focus when typing ( only happens on IE 11)
I have scoured the web trying to find anything about this, but no luck. I have a webpage with a search field that I give focus to when loading the page. The page always loads with the focus in the search field. The search field uses jQuery autocomplete, the search results use a web request. Sometimes when I start typing in the field the field loses focus after typing 3-6 characters but I can't see where the focus goes. When I use blur or focusout to see the target of the focus, it's still on the search field.
The issue only occurs on Internet Explorer 11, other browsers work fine.
javascript jquery internet-explorer-11
asked Nov 20 at 17:33
jbOcelot
11
add a comment |
I have scoured the web trying to find anything about this, but no luck. I have a webpage with a search field that I give focus to when loading the page. The page always loads with the focus in the search field. The search field uses jQuery autocomplete, the search results use a web request. Sometimes when I start typing in the field the field loses focus after typing 3-6 characters but I can't see where the focus goes. When I use blur or focusout to see the target of the focus, it's still on the search field.
The issue only occurs on Internet Explorer 11, other browsers work fine.
javascript jquery internet-explorer-11
asked Nov 20 at 17:33
jbOcelot
11
Could you provide your HTML and JavaScript?
– Christheoreo
Nov 20 at 17:35
add a comment |
I have scoured the web trying to find anything about this, but no luck. I have a webpage with a search field that I give focus to when loading the page. The page always loads with the focus in the search field. The search field uses jQuery autocomplete, the search results use a web request. Sometimes when I start typing in the field the field loses focus after typing 3-6 characters but I can't see where the focus goes. When I use blur or focusout to see the target of the focus, it's still on the search field.
The issue only occurs on Internet Explorer 11, other browsers work fine.
javascript jquery internet-explorer-11
asked Nov 20 at 17:33
jbOcelot
11
I have scoured the web trying to find anything about this, but no luck. I have a webpage with a search field that I give focus to when loading the page. The page always loads with the focus in the search field. The search field uses jQuery autocomplete, the search results use a web request. Sometimes when I start typing in the field the field loses focus after typing 3-6 characters but I can't see where the focus goes. When I use blur or focusout to see the target of the focus, it's still on the search field.
The issue only occurs on Internet Explorer 11, other browsers work fine.
javascript jquery internet-explorer-11
javascript jquery internet-explorer-11
asked Nov 20 at 17:33
jbOcelot
11
asked Nov 20 at 17:33
jbOcelot
11
asked Nov 20 at 17:33
jbOcelot
11
asked Nov 20 at 17:33
jbOcelot
11
asked Nov 20 at 17:33
jbOcelot
11
11
Could you provide your HTML and JavaScript?
– Christheoreo
Nov 20 at 17:35
add a comment |
Could you provide your HTML and JavaScript?
– Christheoreo
Nov 20 at 17:35
Could you provide your HTML and JavaScript?
– Christheoreo
Nov 20 at 17:35
Could you provide your HTML and JavaScript?
– Christheoreo
Nov 20 at 17:35
add a comment |
1 Answer
1
active
oldest
votes
It is possible that some other function get called when you are typing the text and because of that your search field loss the focus.
I try to made a test with code below and I find that it is working fine with IE 11.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"Aron",
"artist",
"Article",
"Argument",
"Arnold",
"Avast",
"amazon",
"Air Space",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<Input type="button" value="Submit"><br>
<Input type="button" value="clear"><br>
</body>
</html>Output:
You can try to make a test with this sample and check on your side whether it is working correctly or not.
If it works then you need to debug your code in IE 11 to find the issue in your code.
You can also try to provide a sample code here, We can help you to test the issue.
answered Nov 21 at 2:19
Deepak-MSFT
55916
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398482%2finput-field-using-jquery-autocomplete-sometimes-loses-focus-when-typing-only%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It is possible that some other function get called when you are typing the text and because of that your search field loss the focus.
I try to made a test with code below and I find that it is working fine with IE 11.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"Aron",
"artist",
"Article",
"Argument",
"Arnold",
"Avast",
"amazon",
"Air Space",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<Input type="button" value="Submit"><br>
<Input type="button" value="clear"><br>
</body>
</html>Output:
You can try to make a test with this sample and check on your side whether it is working correctly or not.
If it works then you need to debug your code in IE 11 to find the issue in your code.
You can also try to provide a sample code here, We can help you to test the issue.
answered Nov 21 at 2:19
Deepak-MSFT
55916
add a comment |
It is possible that some other function get called when you are typing the text and because of that your search field loss the focus.
I try to made a test with code below and I find that it is working fine with IE 11.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"Aron",
"artist",
"Article",
"Argument",
"Arnold",
"Avast",
"amazon",
"Air Space",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<Input type="button" value="Submit"><br>
<Input type="button" value="clear"><br>
</body>
</html>Output:
You can try to make a test with this sample and check on your side whether it is working correctly or not.
If it works then you need to debug your code in IE 11 to find the issue in your code.
You can also try to provide a sample code here, We can help you to test the issue.
answered Nov 21 at 2:19
Deepak-MSFT
55916
add a comment |
It is possible that some other function get called when you are typing the text and because of that your search field loss the focus.
I try to made a test with code below and I find that it is working fine with IE 11.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"Aron",
"artist",
"Article",
"Argument",
"Arnold",
"Avast",
"amazon",
"Air Space",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<Input type="button" value="Submit"><br>
<Input type="button" value="clear"><br>
</body>
</html>Output:
You can try to make a test with this sample and check on your side whether it is working correctly or not.
If it works then you need to debug your code in IE 11 to find the issue in your code.
You can also try to provide a sample code here, We can help you to test the issue.
answered Nov 21 at 2:19
Deepak-MSFT
55916
It is possible that some other function get called when you are typing the text and because of that your search field loss the focus.
I try to made a test with code below and I find that it is working fine with IE 11.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"Aron",
"artist",
"Article",
"Argument",
"Arnold",
"Avast",
"amazon",
"Air Space",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<Input type="button" value="Submit"><br>
<Input type="button" value="clear"><br>
</body>
</html>Output:
You can try to make a test with this sample and check on your side whether it is working correctly or not.
If it works then you need to debug your code in IE 11 to find the issue in your code.
You can also try to provide a sample code here, We can help you to test the issue.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"Aron",
"artist",
"Article",
"Argument",
"Arnold",
"Avast",
"amazon",
"Air Space",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<Input type="button" value="Submit"><br>
<Input type="button" value="clear"><br>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"Aron",
"artist",
"Article",
"Argument",
"Arnold",
"Avast",
"amazon",
"Air Space",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<Input type="button" value="Submit"><br>
<Input type="button" value="clear"><br>
</body>
</html>answered Nov 21 at 2:19
Deepak-MSFT
55916
answered Nov 21 at 2:19
Deepak-MSFT
55916
answered Nov 21 at 2:19
Deepak-MSFT
55916
answered Nov 21 at 2:19
Deepak-MSFT
55916
55916
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53398482%2finput-field-using-jquery-autocomplete-sometimes-loses-focus-when-typing-only%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you provide your HTML and JavaScript?
– Christheoreo
Nov 20 at 17:35