I am clicking to set focus on a textbox, and once I have set focus I am trying to display a simple message. Then on blur that message disappears.
Here is my code: If I click on the textbox it displays the message but if I click the button it doesn't set focus as I thought it would.
<script>
$(document).ready(function(){
$("#clicker").click(function(){
$("#T1").focus(function(){
$("#myFocus").show();
});
});
$("#T1").blur(function(){
$("#myFocus").hide();
});
});
</script>
<body>
<div id="clicker" style="cursor:pointer; border:1px solid black; width:70px;">
Click here!
</div>
<br /><br />
<input id="T1" name="Textbox" type="text" />
<div id="myFocus" style="display: none;">focused!</div>
You need to trigger the focus event, instead of defining it. Try this instead:
<script>
$(function() { // Shorthand for $(document).ready(function() {
$('#clicker').click(function() {
$('#T1').focus(); // Trigger focus
});
$('#T1').focus(function() { // Define focus handler
$('#myFocus').show();
}).blur(function() {
$('#myFocus').hide();
});
});
</script>
The problem is here:
$("#T1").focus(function(){
$("#myFocus").show();
});
You should trigger the event with focus() not attach a callback with focus(function(){...}
Fixed code:
$(document).ready(function(){
$("#clicker").click(function(){
$('#T1').focus();
});
$("#T1").blur(function(){
$("#myFocus").hide();
}) .focus(funcion(){
$("#myFocus").show();
});
});
Related
Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>
Haai. I have a problem. How to I hide this button when I click outside of <input type="search">. The button show when I click <input type="search">but I don't know how to hide the button when we click outside the <input type="search">. Any idea?
HTML
<input type="search">
<button type="submit" class="search_btn" name="button">Search</button>
Jquery
$("input[type='search']").click(function() {
$(".search_btn").addClass("search_on");
});
$("*:not('input[type='search']')").click(function() {
$(".search_btn").removeClass("search_on");
});
You're looking for the blur event.
When you click on the input, it receives focus, when you leave (by clicking, keyboard interaction, etc.) it loses focus and triggers blur. So:
$("input[type='search']").blur(function () {
$(".search_btn").removeClass("search_on");
})
It might also be a good idea to use the focus event instead of click on Line 1 so that users can also tab into the field and have it work correctly:
$("input[type='search']").focus(function() {
$(".search_btn").addClass("search_on");
})
$("input[type='search']").blur(function () {
$(".search_btn").removeClass("search_on");
});
See also:
https://api.jquery.com/focus/
https://api.jquery.com/blur/
Most likely what you want can be accomplished with the focus and blur events.
$("input[type='search']").focus(function() {
$(".search_btn").addClass("search_on");
});
$("input[type='search']").blur(function() {
setTimeout(function () {
$(".search_btn").removeClass("search_on");
}, 50);
});
You'll need a timeout to allow the button to still be clicked, since clicking the button will cause the input to be blurred.
UseremoveClass
$(document).on('click', function(event) {
if (event.target.id !== 'submitButton' && event.target.id !== "search") {
$(".search_btn").removeClass("search_on");
}
})
$("input[type='search']").on({
click: function() {
$(".search_btn").addClass("search_on");
}
});
$("#submitButton").click(function() {
console.log($("#search").val())
})
.search_btn {
display: none
}
.search_on {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" id="search">
<button type="submit" id="submitButton" class="search_btn" name="button">Search</button>
using event focus and blur:
$("input[type='search']").focus(function() {
$(".search_btn").addClass("search_on");
})
$("input[type='search']").blur(function () {
$(".search_btn").removeClass("search_on");
});
You can use focus and blur events. When control is inside the textbox, focus event is called. When control leaves the textbox, blur event is called.
$(document).ready(function() {
$("input[type='search']").focus(function() {
$("button[type='submit'].search_btn").addClass("search_on");
})
$("input[type='search']").blur(function () {
$("button[type='submit'].search_btn").removeClass("search_on");
});
});
.search_on { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search">
<button type="submit" class="search_btn" name="button">Search</button>
I'm facing a problem with dialog closing in JQuery
Here's the code I have :
$(window).on("click",function(e){
if($(e.target).not("#test")){
$("#test").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">
Well, function works like it supposed to(closes dialog when I click outside of it's content) but then I can't toggle it again. Because of the function, I suppose.
Also I tried to fix it with such way but it don't work either :
if($("#test").css("display","block")){
$(window).on("click",function(e){
if($(e.target).not("#test")){
$("#test").hide();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="$('#test').show()">
Is there any way to fix this?
That you very much for spending your precious time with my problem!
Thank you very much for any help or advice!
Your submit click event fires first and then the window click event fires. Hence your dialog keeps getting hidden. Ensure you are not propagating the click event from your submit button if you want to show the dialog.
You might want to add validation to ensure your dialog is not already open when clicking submit though.
$(window).on("click", function(e) {
console.log('window click');
if ($(e.target).not("#test")) {
$("#test").hide();
}
});
$('input[type=submit]').on('click', function(){
$('#test').show();
event.stopPropagation();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" onclick="">
You don't need show or hide functions, you just need to use the open property and change it to false or true.
$(window).on("click",function(e){
if($(e.target).not("#test") && !$(e.target).is("#submit")){
$("#test")[0].open = false; // or document.getElementById("test").open = false;
}
});
$('#submit').click(function() {
$('#test')[0].open = true; // // or document.getElementById("test").open = true;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dialog open id="test"></dialog>
<input type="submit" id="submit">
I have a text field which should hide when it loses focus. I also have a button. The problem is, when you click the button, the text field first loses focus, which moves the button, preventing it from receiving the click event.
HTML:
<div>
<p> Focus on the text field, and then click the button </p>
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br><br><br>
</div>
<button id="clickMe">click me</button>
</div>
JS:
$(function() {
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
});
$('#clickMe').on('click', function(e) {
alert('clicked!');
});
});
http://jsfiddle.net/u86ycf5e/
The button should still move. But it should also receive the click event.
Add a container with a height around the element you are hiding: Fiddle
.container {
height: 50px;
}
HTML
<div class="container">
<div id="hideMeOnFocusOut">
<input type="text" id="focusMeOut" autofocus>
<br>
<br>
<br>
</div>
</div>
Alternatively, you could make the element hide after a short delay via setTimeout like so:
$('#focusMeOut').on('focusout', function (e) {
setTimeout(function() {
$('#hideMeOnFocusOut').hide();
}, 250);
});
Other fiddle
Try ...
$('#focusMeOut').on('focusout', function(e) {
$('#hideMeOnFocusOut').hide();
if (e.relatedTarget.id==="clickMe") {
$("#clickMe").trigger('click');
}
});
This will check to see if the button was clicked and fire it ...
Hide the text box instead with:
$('#focusMeOut').on('focusout', function(e) {
$(this).hide(); //this line changed
});
and optionally set the height of the <div> to prevent button moving with this CSS:
#hideMeOnFocusOut {
height:80px;
}
You might want to rename your IDs more appropriately now.
http://jsfiddle.net/u86ycf5e/4/
I need to focus the text box which on blur moves to next box. but, if an error is detected it needs to be focused again.
here is my code
<input type="text" id="error_code'" name="errorcode[]" onblur="validate_code(this.id)"/>
function validate_code(id){
var error_code=$("#"+id).val();
if(isNaN(error_code))
{
$('#'+id).val("");
$('#'+id).focus();
}
}
however this id not setting focus to same text box. tnx.
EDIT: Am able to validate and get result. But, my question is on re-focusing the text box if error is returned...
Try something like this.. this works perfectly:
HTML:
<input type="text" id="error_code"/>
Jquery blur function:
$(document).ready(function(){
$("#error_code").blur(function(){
var error_code=$(this).val();
if(isNaN(error_code)) {
$(this).val("");
$(this).focus();
}
});
});
You need to tryout something like this.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="example">
<div>
<input type="text" id="error_code" name="errorcode[]" onblur="validate_code(this.id)"/>
</div>
<script>
function validate_code(id){
var error_code=$("#"+id).val();
if(isNaN(error_code)) {
setTimeout(function() {
$('#'+id).val("");
$('#'+id).focus();
}, 0);
}
}
</script>
</div>
</body>
</html>
In case of jQuery its already tries to set focus to the field. It will block further focus events to the field. To you need to hack it out by something like this.