jQuery focusin and focusout live events are not firing
Date : March 29 2020, 07:55 AM
I hope this helps . .live() needs a selector not a DOM element, in the place you're calling it, it's only on a DOM element, so instead of this: $(this).each(function() {
$(this).live('focusout', function() {
this.live('focusout', function() {
|
Jquery event binding to select focusin/out
Tag : css , By : Juan Pablo
Date : March 29 2020, 07:55 AM
should help you out The root of the problem is that you're only adding the class when the select is focused, and then removing it when the select value changes. The reason why the class never gets added back is because the select never loses focus when you choose one of its options. Something like this should get you the behavior you're after: $('select').click(function(){
$(this).parent('a').toggleClass('focus');
});
$('select').blur(function() {
$(this).parent('a').removeClass('focus');
});
|
jQuery focusin event: Why is event.data empty?
Date : March 29 2020, 07:55 AM
Any of those help My binder: , The order you trigger your event is important here: $('input').on('focusin', function(event, extra, data) {
console.log(extra, data);
});
$('input').trigger('focusin', ['extra', 'data']);
|
JQuery .focusin event on all input elements not in div id
Date : March 29 2020, 07:55 AM
this one helps. You can use event delegation to your form element, filtering out events triggered on descendants of #CxInfo: $(myform).on('focusin', ':not(#CxInfo input)', function(e) {
/* Your code here */
});
$('#myform').on('focusin', ':not(#CxInfo input)', function(e) {
this.value = '';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input value="foo" />
<div id="CxInfo">
<input value="bar" />
</div>
<input value="baz" />
</form>
$('#myform').on('focusin', 'input', function(e) {
/* Your code here */
});
$('#CxInfo').on('focusin', function(e) {
e.stopPropagation();
});
$('#myform').on('focusin', 'input', function(e) {
this.value = '';
});
$('#CxInfo').on('focusin', function(e) {
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
<input value="foo" />
<div id="CxInfo">
<input value="bar" />
</div>
<input value="baz" />
</form>
|
How to get focusin for all textbox? using javascript event not using jquery
Date : March 29 2020, 07:55 AM
Any of those help I'd use event delegation instead - add focusin and focusout listeners to the form, and when the event fires, if the target of the event is one of the .inputBoxes, carry out the logic to change the class of the event.target.previousElementSibling: const form = document.querySelector('form');
form.addEventListener('focusin', inputAddClassFunc);
form.addEventListener('focusout', inputRemoveClassFunc);
function inputAddClassFunc(event) {
if (event.target.matches('.inputBox')) {
event.target.previousElementSibling.classList.add('active');
}
}
function inputRemoveClassFunc(event) {
if (event.target.matches('.inputBox')) {
var hasValue = event.target.value;
if (!hasValue) {
event.target.previousElementSibling.classList.remove('active');
}
}
}
.active {
background-color: yellow;
}
<form>
<div class="form-group">
<label for="txtFirstName">Your name</label>
<input id="txtFirstName" name="txtFirstName" type="text" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<label for="txtEmail">Email address</label>
<input id="txtEmail" name="txtEmail" type="email" autocomplete="off" class="inputBox" />
</div>
<div class="form-group">
<select id="drpPosition" name="drpPosition">
<option>I would describe my user type as </option>
<option>Web developer </option>
<option>Web designer </option>
</select>
</div>
<div class="form-group">
<label for="txtPassword">Password</label>
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
<small>Minimum 8 characters</small>
</div>
<div class="form-group">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Next" />
</div>
</form>
<input id="txtPassword" type="password" class="cool" autocomplete="off" class="inputBox" />
<input id="txtPassword" type="password" autocomplete="off" class="inputBox" />
|
Boards Message :
Related QUESTIONS :