We Keep Coding

Javascript - Why is input value missing a character?

I am trying to get this script to autofill another field while the original field is being filled in. But the second field loses the last character of its value. Any ideas why?
Here is the code...
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">
$(".first").on('keydown',function(){
$(".second").val($(this).val());
});
http://jsfiddle.net/fmdwv/1/

The keydown event fires before the value is updated, so when you read it, you get the value before it has been changed by the key being pressed.
Use the input event instead (that will also fire after a paste).
$(".first").on('input', function() {
$(".second").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">

The onkeydown event occurs when the user is pressing a key
The onkeyup event occurs when the user releases a key
The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.
in your case onkeydown it execute function first .so on execution values inside input is not updated with pressed key value so it fires before value inserted
checkout this example
$(".first").on('keyup',function(){
$(".second").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">

Angular event binding for input (type="search") cross icon?

How to bind an event with Angular 2 (4, 5, 6, 7) for the cross icon of an <input type="search">? Which event gets triggered?
Looking for a solution like (other than (search) because it does not work in IE):
<input type="search" (click)="search()">
Additional question: What's the official name of this cross icon? Kinda hard googling/duckduckgoing for a solution when not knowing the right terms?
Duplicate Question: How do you detect the clearing of a "search" HTML5 input?

<input type="search" (search)="search()">

There are multiple ways of binding the search event with component
1) Using change event
<input type="search" class="form-control" placeholder="Search" (change)="onSearchCustomer($event)">
// This event get fired when you type something and hit enter, but if you
// again hit enter without adding a new input it won't get fired.
//(i.e It fires only when the content changes and mean while enter is pressed)
2) Using search event
<input type="search" class="form-control" placeholder="Search" (search)="onSearchCustomer($event)">
// This event is fired whenever enter is pressed.(i.e without caring about the change of content)
3) Using keyup event
<input type="search" class="form-control" placeholder="Search" (keyup)="onSearchCustomer($event)">
// This event is fired on every key press
4) Using keyup.enter event
<input type="search" class="form-control" placeholder="Search" (keyup.enter)="onSearchCustomer($event)">
// This event is similar to search event which only fires when enter is pressed
Now in your Component file
onSearchCustomer(event: any) {
console.log(event.target.value);
}
Hope this will help you or somebody else!

<input type="search" placeholder="Search for text" #searchInput (keyup)="search(searchInput.value)" (search)="search()">

Event for user selecting continuation in textbox

When I input some text in an <input type="text">, and the text matches some previously input text, the browser will present a dropdown and I can reuse that text.
But which javascript event will the input receive when that text is selected?
onkeydown/onkeyup does not trigger
onchange does not trigger.
In Firefox, it seems like onselect is triggered, but not in chrome. However, that event is used for other purposes.
onclick does not trigger.
onblur is as usually only triggered when the input loses focus.

There is an interesting event named input:
JSFiddle example.
Html:
<form>
<input id="text" name="text" type="text" />
<input type="submit" value="Sumbit" />
</form>
Script:
$(document).ready(function()
{
$('#text').on('input', function()
{
console.log('Changed to ' + this.value);
});
});

fill checkbox when text is in text area in javascript

I have a text area form like this one:
<input id="sg_0" name="sjalfgefid" type="text" class="letur hvitur" size="8" maxlength="40" value=""></td>
and a Checkbox next to it:
<input type="Checkbox" id="cb0" name="innsent" tegund="val" gildi="eink" value="0" number="0" parents="1" onclick="hakaVid(this)">
I want the checkbox to be filled when some text is written in the text area. And when the user deletes all the text from the textbox, I want the checkbox to update immediately
How can I possibly do this ?

Attach an onKeyUp event handler to the <input> and modify the checkbox's value according to this.value.length.
<input id="sg_0" name="sjalfgefid" type="text" class="letur hvitur"
size="8" maxlength="40" value=""
onkeyup="document.getElementById('cb0').checked = this.value.length > 0;">
Example: http://jsfiddle.net/qG5Cu/
UPDATE You might be interested on using the onInput event handler instead of onkeyup. See this link for more information: Using the oninput event handler with onkeyup/onkeydown as its fallback

I guess you should try with input events, check w3c:
input tag

textbox should invoke button click event

I have a textbox and a button; the button click event navigates to other location in the website. I want to do the same thing on pressing the enter key but unable to do that. Please help me solve this. My code snippet follows:
function call()
{
document.location= "location.aspx";
}
<input type="text" id="txt1" onkeydown ="if(event.keyCode==13)document.getElementById('bt1').click()"/>
<input type="button" id="bt1" value ="Hit me" onclick ="call()" />

This is the same as the click, both would call this function...
onkeydown ="if(event.keyCode==13) call()"

If you can edit your HTML code, you wont probably need to do any JS to get this to working.
The INPUT fields in your HTML should be wrapped inside a FORM tag (atleast thats how it semantically makes more sense in most of the cases).
If you can do that, you can then change the INPUT element from TYPE button to Type SUBMIT and can then listen for the onsubmit event on your FORM element.
The event is fired both on pressing of enter key and click of the button and it works pretty smoothly across the browsers. The only problem is IE which doesnt fire the onsubmit event on a form with just 1 text input field. For that, you will have to insert another field into the form. You can hide it for your case. More ref at : http://style-vs-substance.com/development/form-submit-by-enter-key-and-internet-explorer/
EDIT: Code Sample
<form id="myForm">
<!--[if IE]>
<input type="text" style="display: none;" disabled="disabled" size="1" /><![endif]-->
<input type="text"/>
<input type="submit" value="Search"/>
</form>
Then in your JS:
var formHandler = document.getElementById('myForm');
formHandler.onsubmit = function(){
//this callback will be invoked both by the search button and enter key now
//your logic here
}