We Keep Coding

Onlick event not triggering which contains blur function

I have a form and on click on an input, I'm adding classes to that input's wrapped div.
To do this, I've made use of blur and executing my function on click. However, on some cases (very rarely) it will work (and add the class). But majority of the time, it doesn't perform the click action (because the console.log("click") doesn't appear).
My thinking is that maybe the browser is conflicting between the blur and click. I have also tried changing click to focus, but still the same results.
Demo:
$(function() {
var input_field = $("form .input-wrapper input");
$("form .input-wrapper").addClass("noData");
function checkInputHasValue() {
$(input_field).on('blur', function(e) {
var value = $(this).val();
if (value) {
$(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData");
} else {
$(this).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData");
}
});
}
$(input_field).click(function() {
checkInputHasValue();
console.log("click");
});
});

i've done some modification in your code .
function checkInputHasValue(e) {
var value = $(e).val()
if (value) {
$(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("hasData");
} else {
$(e).parent().closest(".input-wrapper").removeClass("hasData noData").addClass("noData");
}
}
$(document).on('blur',input_field, function(e) {
checkInputHasValue($(this));
});
$(document).on("click",input_field,function() {
checkInputHasValue($(this));
console.log("click");
});

In order to avoid conflits between events, you would separate the events and your value check. In your code, the blur event may occur multiple times.
The following code seems ok, as far as I can tell ^^
$(function() {
var input_field = $("form .input-wrapper input");
$("form .input-wrapper").addClass("noData");
function checkInputHasValue(el) {
let target = $(el).closest(".input-wrapper");
var value = $(el).val();
$(target).removeClass("hasData noData");
$(target).addClass(value.length == 0 ? "noData" : "hasData");
console.log("hasData ?", $(target).hasClass("hasData"));
}
$(input_field).on("click", function() {
console.log("click");
checkInputHasValue(this);
});
$(input_field).on("blur", function() {
checkInputHasValue(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="input-wrapper">
<input>
</div>
</form>

How to Bind keyup event to jQuery plugin

i am trying to create jQuery plugin which needs to trigger on keyup of input tag.
But, somehow its not working :(
I've tried it so far:
JS:
$.fn.search_panel = function() {
if($(this).prop("tagName").toLowerCase() == 'input'){
var input_str = $.trim($(this).val());
console.log($(this));
onkeyup = function(){
console.log(input_str);
}
}
};
Plugin Initialization
$(document).ready(function(){
$('input').search_panel();
});
HTML:
<input type="text" />
From the above code, it only console when page loads for the first time, but after entering anything in input box it doesn't console.

You're inadvertantly binding to the window's onkeyup event. You should use $(this).on instead to bind to the individual keyup event on each input:
$.fn.search_panel = function() {
// Iterate all elements the selector applies to
this.each(function() {
var $input = $(this);
// Can probably make this more obvious by using "is"
if($input.is("input")){
// Now bind to the keyup event of this individual input
$input.on("keyup", function(){
// Make sure to read the value in here, so you get the
// updated value each time
var input_str = $.trim($input.val());
console.log(input_str);
});
}
});
};
$('input').search_panel();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input><input><input><input>

Add keyup event inside plugin and bind it to current input,
$.fn.search_panel = function () {
if ($(this).prop("tagName").toLowerCase() == 'input') {
$(this).keyup(function () {
var input_str = $.trim($(this).val());
console.log($(this));
console.log(input_str);
});
}
};
Demo

What event is triggered when the value of an input field is changed?

I'm using a JavaScript library that occasionally changes the value of an input field. I want to detect when that happens.
Apparently, the change and input events are not triggered when the value of an input field is changed (at least not on Chrome).
To verify that, I have tried this (using jQuery):
<script>
$(function() {
$('#inp').on('change',function() { console.log('change event'); });
$('#inp').on('input',function() { console.log('input event'); });
$('#inp').val('hello');
});
</script>
<input type="text" id="inp">
Neither the change event nor the input event is triggered when I call .val('hello').
How can I detect the change? (Please remember that the code that changes the value is outside my control, so I cannot add a call to trigger() there.)

There is a work around, you can pool the value of textbox after regular intervals and trigger the event when it is changed.
Live Demo
$('#elementId').change(function(){
alert("changed");
});
var previousVal = "";
function InputChangeListener()
{
if($('#elementId').val() != previousVal)
{
previousVal = $('#elementId').val();
$('#elementId').change();
}
}
setInterval(InputChangeListener, 500);
$('#elementId').val(3);
Edit based on comments for many elements.
You can use array and monitor, 30 element wont be a performance concern
Live Demo
$('.someclass').change(function(){
alert("changed, id >> " + this.id);
});
var hashTablePrevElem=[];
$('.someclass').each(function(){
hashTablePrevElem[this.id] = this.value;
});
function InputChangeListener()
{
$('.someclass').each(function(){
if(hashTablePrevElem[this.id] != this.value)
{
hashTablePrevElem[this.id] = this.value;
$(this).change();
}
});
}

Simulate an "ontype" event

I want to simulate the Google Search effect that even with the search box not focused, the user can start typing and the input box will capture all keyboard strokes.
I have looked for an ontype event, but haven't found anything. I know that the event object in callbacks for events like click has keyboard information, but I don't think this is what I'm after.

This does the job:
$(document).on('keydown', function() {
$('input').focus();
});

HTML:
<input type="text" id="txtSearch" />
Javascript:
var googleLikeKeyCapture = {
inputField : null,
documentKeydown: function(event) {
var inputField = googleLikeKeyCapture.inputField;
if(event.target != inputField.get(0)) {
event.target = inputField.get(0);
inputField.focus();
}
},
init: function() {
googleLikeKeyCapture.inputField = $('#txtSearch');
$(document).bind('keydown', googleLikeKeyCapture.documentKeydown);
googleLikeKeyCapture.inputField
.focus(function() {
$(document).unbind('keydown');
})
.blur(function() {
$(document).bind('keydown', googleLikeKeyCapture.documentKeydown);
});
googleLikeKeyCapture.init = function() {};
}
};
$(googleLikeKeyCapture.init);
Also you can find jsFiddle example here
EDIT :
And now it's a jQuery plugin. :) If keydown occures in a textarea or input field it doesn't capture keys, anything else goes to designated input field. If your selector matches more than one element it only uses the first element.
Usage: $('#txtSearch').captureKeys();

The event you are after is onkeypress.

Try this jQuery Text Change Event plugin:
http://www.zurb.com/playground/jquery-text-change-custom-event

Detect which form input has focus using JavaScript or jQuery

How do you detect which form input has focus using JavaScript or jQuery?
From within a function I want to be able to determine which form input has focus. I'd like to be able to do this in straight JavaScript and/or jQuery.

document.activeElement, it's been supported in IE for a long time and the latest versions of FF and chrome support it also. If nothing has focus, it returns the document.body object.

I am not sure if this is the most efficient way, but you could try:
var selectedInput = null;
$(function() {
$('input, textarea, select').focus(function() {
selectedInput = this;
}).blur(function(){
selectedInput = null;
});
});

If all you want to do is change the CSS for a particular form field when it gets focus, you could use the CSS ":focus" selector. For compatibility with IE6 which doesn't support this, you could use the IE7 library.

Otherwise, you could use the onfocus and onblur events.
something like:
<input type="text" onfocus="txtfocus=1" onblur="txtfocus=0" />
and then have something like this in your javascript
if (txtfocus==1)
{
//Whatever code you want to run
}
if (txtfocus==0)
{
//Something else here
}
But that would just be my way of doing it, and it might not be extremely practical if you have, say 10 inputs :)

I would do it this way: I used a function that would return a 1 if the ID of the element it was sent was one that would trigger my event, and all others would return a 0, and the "if" statement would then just fall-through and not do anything:
function getSender(field) {
switch (field.id) {
case "someID":
case "someOtherID":
return 1;
break;
default:
return 0;
}
}
function doSomething(elem) {
if (getSender(elem) == 1) {
// do your stuff
}
/* else {
// do something else
} */
}
HTML Markup:
<input id="someID" onfocus="doSomething(this)" />
<input id="someOtherID" onfocus="doSomething(this)" />
<input id="someOtherGodForsakenID" onfocus="doSomething(this)" />
The first two will do the event in doSomething, the last one won't (or will do the else clause if uncommented).
-Tom

Here's a solution for text/password/textarea (not sure if I forgot others that can get focus, but they could be easily added by modifying the if clauses... an improvement could be made on the design by putting the if's body in it's own function to determine suitable inputs that can get focus).
Assuming that you can rely on the user sporting a browser that is not pre-historic (http://www.caniuse.com/#feat=dataset):
<script>
//The selector to get the text/password/textarea input that has focus is: jQuery('[data-selected=true]')
jQuery(document).ready(function() {
jQuery('body').bind({'focusin': function(Event){
var Target = jQuery(Event.target);
if(Target.is(':text')||Target.is(':password')||Target.is('textarea'))
{
Target.attr('data-selected', 'true');
}
}, 'focusout': function(Event){
var Target = jQuery(Event.target);
if(Target.is(':text')||Target.is(':password')||Target.is('textarea'))
{
Target.attr('data-selected', 'false');
}
}});
});
</script>
For pre-historic browsers, you can use the uglier:
<script>
//The selector to get the text/password/textarea input that has focus is: jQuery('[name='+jQuery('body').data('Selected_input')+']')
jQuery(document).ready(function() {
jQuery('body').bind({'focusin': function(Event){
var Target = jQuery(Event.target);
if(Target.is(':text')||Target.is(':password')||target.is('textarea'))
{
jQuery('body').data('Selected_input', Target.attr('name'));
}
}, 'focusout': function(Event){
var Target = jQuery(Event.target);
if(Target.is(':text')||Target.is(':password')||target.is('textarea'))
{
jQuery('body').data('Selected_input', null);
}
}});
});
</script>

You only need one listener if you use event bubbling (and bind it to the document); one per form is reasonable, though:
var selectedInput = null;
$(function() {
$('form').on('focus', 'input, textarea, select', function() {
selectedInput = this;
}).on('blur', 'input, textarea, select', function() {
selectedInput = null;
});
});
(Maybe you should move the selectedInput variable to the form.)

You can use this
<input type="text" onfocus="myFunction()">
It triggers the function when the input is focused.

Try
window.getSelection().getRangeAt(0).startContainer