Develop Reference

What event callback in the DOM API can I call when a form field receives focus (either through mouse click or by tabbing)

My goal is to make form fields bigger when the cursor focuses on them either through a mouseclick or by tabbing using the keyboard.
Using document.activeElement focus I could know when user click inside text
input or when the user clicks on a select element.
My problem is when user is using tab key and moving their way to select list.
While using the keyboard only and not using mouse , if user will press tab and get to select list element focus event will not fire and select will not be resized.
What event will determine if cursor is located on select element while pressing tab key only?

With only using vanilla javascript you can easily select the input field you are trying to make bigger by using the function querySelector from the document object given to you. Then by adding an eventListener to that reference and watching only for 'focus' events. These would be called regardless of how your user got to that component / field. By Tab key or by mouseclick.
Here is a short example taken from the MDN docs.
//HTML
<form id="form">
<input type="text" placeholder="text input">
</form>
//JavaScript
const textInstance = document.querySelector('input[type="text"]');
textInstance .addEventListener('focus', (event) => {
// inside here you can change the style using CSS, i.e. make field bigger. In this case it sets the field background pink.
event.target.style.background = 'pink';
});

How to handle change or input event of input type="text" if value is inserted from another element without touching this input

I have a input type="text" and next to that a button which opens up a calendar on click. When a value is selected in calendar textbox ix populated.
I would like to handle on change of textbox to enable other controls.
change, input etc events are triggered only if use manually enters values in the text box. But in my case I am not touching the input textbox.
Thanks.

Use jquery change event.
$("input").change(function(){
//do something
})
Update:
As .change event doesn't get fired when you change value using any javascript method, there is a work around.
When you change the date, you can trigger an event to the input element like $("input").keyup() and listen using:
$("input").keyup(function(){
// input updated
})
codepen example: https://codepen.io/azharuddinkhan8898/pen/MNrLad

Form validation: un-hide submit button when a radio value is selected and text message is entered

I just want my "submit" button to un-hide (so user can push it) when a radio button is selected and a message is entered in the text box.
I'm using ruby on rails, but I think this may be a javascript/css question. please let me know.
(Also i'm using formalize for the form styling)

You should add an onchange (or onclick) event listener to the radio button and a keyup event listener to the text box, then check the values. http://jsfiddle.net/vHdBb/1/

Javascript Event Listener on Text Field

I have a text input on a form that I need to check if the value has changed at anytime. Essentially the text input is a date field and I'm using a 3rd parties script to popup a calendar where you can select a date which is then set as the text field value.
So here is my problem. Say when the form is loaded the text field already has a value of 1/1/11 if someone clicks on the field and changes it with the keyboard to 1/2/11 or anything else my event listener kicks off and executes the function I want. My problem is that if someone clicks the calendar icon and selects a date though it changes the value of the input field it doesn't kick off the event handler.
I've tried using onchange event handler directly on the input box and an event listener for the input box and it appears both only pick up the change when focus on the field has changed. Here is the event listener script the way it sits now..
document.getElementById('anchor1x').addEventListener('change', function() {
alert("date changed");
}, false);
Is there something else I can do to check if the field value is changed be it by user input through direct typing or through the calendar select?

Perhaps add an event listener to the icon as well? That way when its selected, it'll also fire.

detecting change in a text input box using jquery/javascript

in html and javascript, I can use keyup, focus, blur to detect most of the content changes in a text input, however if the user do a copy and paste into the text input, how do I capture this change? The issue here is that the input is already in focus when user paste into it.

You could capture the paste event (http://www.quirksmode.org/dom/events/cutcopypaste.html)
$("#myinput").bind("paste",function(){
//code here
})

$("#myinput").change(function(){
// whatever you need to be done on change of the input field
});
// Trigger change if the user type or paste the text in the field
$("#myinput").keyup(function(){
$(this).change();
});
// if you're using a virtual keyboard, you can do :
$(".key").live('click',function(){
$("#myinput").val($("#myinput").val()+$(this).val());
$("#myinput").change(); // Trigger change when the value changes
});

the textbox has an OnChange event that fires when a) the text box loses focus AND the value within the text box has changed.