Develop Reference

Is there a wat to style just the user input text in a <input type ="text"> not the input field itself?

I am using Cordova to make an android app and I have a text field where the user types into. Im using a keyboard function so I can listen for the done key on a text field. When the event fires I want to be able to "animate" the text that was just entered into the field. I don't necessarily want to animate it, but really just put a circular box around the text so that its clear the input has been accepted.
For example:
This is what it looks like after they've typed their text and before they've pressed done on the keyboard.
Text input before submit
When the event fires I want to style the text as such where the font weight changes and the background of the text gets bubbled. Is this possible?
Text input after submit

In the function that you're using to listen for the done key, you can use Element.classList.add() to add a class to the <input type="text"> element.
const inputElement = document.getElementById('your-input-element')
inputElement.classList.add('recipent-submitted')
Then apply whatever styling you want to .recipent-submitted in your CSS file.

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

replacing jQuery click to Keyup event

Current functionality: I have a button and inside the button there is a text input field. When user enters something in the text input field and click the button. Value from text field is applied to all other empty input field. (or in simple words I have several other text input fields as well where the value from the text field (which is inside the button) is copied).
Desired functionality: So instead of clicking the button and then copying the input field to all other text inputs. I am trying to achieve the same functionality using Keyup. So the moment user enters something inside the text field. It will be copied on all other input fields as well.
I tried replacing click event with Keyup but it didn't work. Here is my code
HTML
<input id="applyToAllSingles" type="text" onkeypress="validateInputs(event, 'decimal')">
JS
$("a.button.applySingles").on("click", function(e) {
e.preventDefault();
document.betSlip.applyToAllSinglesBetInput($(this).find("input").val());
});
BetSlip.prototype.applyToAllSinglesBetInput = function(value) {
$("#bets div[name=singleBet] .supermid input:text").val(value);
$("#applyToAllSingles").val(value);
}
I am sure that I am missing something since replacing the above function with the below mentioned code doesn't work
$("#applyToAllSingles").on("Keyup", function(e) {
e.preventDefault();
document.betSlip.applyToAllSinglesBetInput($(this).find("input").val());
});

First of all, you should use keyup instead of Keyup. If everything else is fine, your function should work.
Here is a working example

Dynamically create new textbox when another is filled in

To illustrate: http://sas98.user.srcf.net/guestlist/
I want a new input field to be created when the user types something in the guest list field at the bottom.
Is it possible to do this as opposed to having to press a button with onClick?

you can add a blur event that gets fired when a first input box looses focus. THere can be an additional check to make sure someone put some text to the first input field, if there is a value add a new input field
$('#guest_list_input').blur(function() {
if($(this).val().length>0) {
$('#myPlaceWhereIWantToAddANewInputField').append('<input value='test' name='test' />');
}
});

You might want to append a new input after focus, blur or change events.
My choice would be to create a field on focus (so the user can switch to it by pressing Tab) and optionally remove the empty fields on blur events. Possibly with some fancy fadeIn/Out effects.

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.