We Keep Coding

How to know if an input is clicked and unclicked in Javascript

I'm trying to figure out how to know when an input is clicked and when it is unclicked. Let me explain:
When ever you want to type something on an input field, you click on the input box and when you don't want to type, you click somewhere else and the input field is disabled.
<input type='text'>
Here as you can see, when you click on it, the field is enabled, and when you click somewhere else other than the field, it disables.
I just want to know when the field is disabled/unclicked.

When you click on the input field focus event is fired. When you lose focus blur event is fired.
var elem = document.getElementById("fname")
elem.addEventListener("blur", myFunction);
function myFunction() {
alert("Input field lost focus.");
}
<input type="text" id="fname">

I believe you're just looking for onFocus.
<input type='text' onFocus={/* do something */} />
Read more about React events here.

Onselect needed for a text field

I have a scenario where, on select of an option in select drop down, the form should submit.
For that I have written a Jquery function
function xxx(val) {
$("#form").submit();}
And the tag is as follows
<input type="text" name="xxx_txt" id="id_xxx" title="xxx" placeholder="xxx" value="$!{query}" ">
And I am populating my text field dynamically with values
$("#id_xxx").autocomplete({
source: sourcedata,
minLength: 1
})
But on select, nothing happens because, the field is not a select dropdown, but a normal text field , to which values are assigned, thus making it a select dropdown.
Basically I am writing a search function similar to google, where the search triggers , on a selection.
Kindly suggest.

try onChange event on your input element
$("input#id_xxx").change(function(){
if($(this).val() !== ""){
$("#form").submit();
}
});
This will trigger when input element lost focus
for every change on input element:
$("input#id_xxx").on("input", function(){
if($(this).val() !== ""){
$("#form").submit();
}
});

How to know that some text is entered as well as cursor has come out of textbox?

I want to know if there is any event or way to know that some text has been entered into the textarea and also the user has come of the textarea, so that i can invoke some text like "success".
For the some values in the textarea i think we can do through val() function. But how to know that user has come out of the Textarea
My code is like:
<input type="textarea" id="link1"></textarea>

if (!$("#link1").val()) {
// textarea is empty
}
You can also use $.trim to make sure the element doesn't contain only white-space:
if (!$.trim($("#link1").val())) {
// textarea is empty or contains only white-space
}
and for detecting when user comes out of textarea
$('#link1').focusout(function() {
alert(this.id + " focus out");
});

Try to catch the onblur event and then check the value.length to see if there is a value added to the textbox.

textarea should be like
<textarea id="link1"></textarea>
events you are searching are onkeyup, onfocus and onblur

Using onKeyPress it can be detected weather some text has been entered
and onBlur it can be detected weather the user has come of the textarea
<input type="textarea" id="link1" onBlur = blured() onKeyPress = pressed()></textarea>

an event that fire's when the textbox is changing from another element

i have 4 textbox's on my form 3 of them change the last textbox value every time they
assign new values.
iam trying to create an event that will trigger every time the last textbox value as changed
not only when the textbox leave focus or key up an down.
i tried this code but it doesn't work
<input class='textbox' type='text'/>
<input class='textbox' type='text'/>
<input class='textbox' type='text'/>
<input id='hex_color_textbox' class='textbox' type='text'/>
$("#hex_color_textbox").on('change keyup paste', function()
{
});
any ideas?
thank you

If you want your code to react when the user is typing/pasting something, you can just say:
$("#hex_color_textbox").on('input', function()
{
//do your stuff
});
Here is the example: http://jsfiddle.net/dwYeC/

you should put the change event on the other input's if you want the last input to be changed to the value of one of the three textboxes
$("input:not('#hex_color_textbox')").on("change", function() {
var val = $(this).val()
$("#hex_color_textbox").val(val);
});

I have tried your code on jsbin.com and it works as you described with no problem.
I used jquery 1.8
see code
what kind of browser are you using and what version of jQuery?

try below:-
$('#hex_color_textbox').change(function(){
// do operation according to Your requirement
alert("the value has changed");
});

Possible collision/conflict between 2 javascripts?

Here is example http://jsfiddle.net/rigaconnect/gLCjy/14/
One javascript ensures copy-paste value from above input field. User presses and holds ctrl, then click on field below.
$(document).ready(function(){
$("input").on('click', function(e) {
var name1 = $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').val();
if(e.ctrlKey) $(this).val(name1);
});
});
Second javascript changes input field value to 1 if in certain input fields value is entered or changed
<input type="text" name="is_row_changed[]" id="is_row_changed1" size="1">
<script>
$(".row_changed1").on("change", function () {
document.getElementById('is_row_changed1').value = 1;
});
</script>
html input fields are like this
<input type="text" name="date_year[]" id="date_year1" class="row_changed1" value="" size="2">
If I enter (or copy-paste) values without ctrl+click then all works as necessary.
However if I hold ctrl and click in field then value is copied and appears in the field, but value here <input type="text" name="is_row_changed[]" id="is_row_changed1" size="1"> does not change.
Enter something in left top field. Right top field value changes to 1. That is ok.
Then press and hold ctrl and click in left bottom field. Left bottom field value becomes the same as left top field's value. This is also ok.
But right bottom field value does not change. This is the problem... Actually no idea. Need advice to which direction to go....

That is because change event doesnot get triggered on programatically assined values. You can manually trigger it when you assign the value to the textbox.
$(document).ready(function () {
$("input").on('click', function (e) {
var name1 = $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').val();
if (e.ctrlKey) {
$(this).val(name1).trigger('change'); //Trigger the change event here.
};
});
});
Fiddle