The Jquery Focus is not working for a single input button click is working only problem is with the input field as shown in the below code:
Not working only for single input field.
$(document).ready(function(){
$("#val").change(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn1").click(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});<!DOCTYPE html>
<html>
<head>
<script src=".2.1/jquery.min.js"></script>
</head>
<body>
Enter your name: <input id="val" type="text">
<br><br>
<button id="btn1">Trigger focus event</button>
<button id="btn2">Trigger blur event</button>
<p style="color:red"></p>
</body>
</html>The Jquery Focus is not working for a single input button click is working only problem is with the input field as shown in the below code:
Not working only for single input field.
$(document).ready(function(){
$("#val").change(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn1").click(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
Enter your name: <input id="val" type="text">
<br><br>
<button id="btn1">Trigger focus event</button>
<button id="btn2">Trigger blur event</button>
<p style="color:red"></p>
</body>
</html>I have added the jsfiddle link below :https://jsfiddle/Manishankarg/0ony2ovb/
Share Improve this question asked Jun 13, 2017 at 12:16 ManiShankarManiShankar 352 silver badges8 bronze badges 3- What is the expected behaviour? for me looks to be working totally fine – Mayday Commented Jun 13, 2017 at 12:19
- It's working. You just check it. I click on button it Focused in input element – Kushal Suthar Commented Jun 13, 2017 at 12:19
-
i think what you're looking for is
on('input', () => {})event – Semi-Friends Commented Jun 13, 2017 at 12:23
3 Answers
Reset to default 5If what you want to achieve is to retain focus even on clicking tab then you will have to use keydown() instead of change().
Actually your code is working fine. Only that the change() is not triggered the second time you press tab without changing the input.
$(document).ready(function(){
$("#val").keydown(function(e){
if(e.which == 9) {
e.preventDefault();
$("p").html("focus event triggered");
}
});
$("#btn1").click(function(){
$("#val").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});
I have added the jsfiddle link below : Keydown Example
$(document).ready(function(){
$("#val").on('input', function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn1").click(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});
i think what you're trying to do is to trigger change event when input value changed
If i understand you're question correct you just have to change the change function to the blur function in your javascript function. This will trigger the focus on the input element.
$(document).ready(function(){
$("#val").on('blur', function(e){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn1").click(function(){
$("input").focus();
$("p").html("focus event triggered");
});
$("#btn2").click(function(){
$("input").blur();
$("p").html("blur event triggered");
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
Enter your name: <input id="val" type="text">
<br><br>
<button id="btn1">Trigger focus event</button>
<button id="btn2">Trigger blur event</button>
<p style="color:red"></p>
</body>
</html>