We Keep Coding

Prevent keyUp event when onPaste event is triggered

I have the following input field:
<input onPaste={pasteFunction} keyUp={keyupFunction} />
I want either the pasteFunction or keyupFunction to run, NOT both. But when a user pastes text into this field both events get triggered and both run.
Is there a way to prevent keyUp if something was pasted into the field?
I tried to set a flag and reset it:
function pasteFunction() {
pasteInProgress = true;
//etc...
pasteInProgress = false;
}
function keyupFunction() {
if (pasteInProgress) return;
//etc...
}
But this doesn't work as pasteInProgress is set to false before keyupFunction is triggered.

You could try storing the time instead, for example.
function pasteFunction() {
lastPaste = Date.now();
//etc...
}
function keyupFunction() {
//less than one second has passed.
if (Date.now()-lastPaste<1000) return;
//etc...
}
Maybe try experimenting with different times depending on the application, but it is still a "hacky" way to solve it. I think there could be better ways.

Is there a way to prevent keyUp if something was pasted into the field?
Assuming you are using a ui library (react?), you could store a value in the component state when something was pasted into the field.
this.state = {
hasPasted: false;
}
function pasteFunction() {
this.state.hasPasted = true; // could also be a timestamp if you need granularity
}
function keyupFunction(e) { // assuming you can pass event here
if (this.state.hasPasted){
// you may want to preventDefault() here
e.preventDefault();
return;
};
}
Without you sharing more context/code, this should do it.

Chrome suggested box is not cleared after onsubmit

I submit a <form> in javascript with 'ENTER' key and call a function. This function returns false so that the page is not reloaded.
Unfortunately, the box is not cleared as shown in the picture.
the end of the list, but 'toto' and other entries were proposed. The suggestion box is not cleared.
How could I clear it?
Here is the code used
$('form').on('submit', function () {
var newUser = $('input.user').val()
displayPerson(newUser) // add the person
$('input.user').val('')
return false;
});

I would suggest to briefly remove the focus from the input:
$('form').on('submit', function () {
var newUser = $('input.user').val()
displayPerson(newUser) // add the person
$('input.user').val('').blur(); // <-- blur
setTimeout(function () { // Allow time for blur to happen
$('input.user').focus(); // <-- put focus back (if desired).
}, 0);
return false;
});

Two dom events that call the same function should call the function only once if happening in the same time

I have one input and one button. When I blur from the input and the input has changed, the price() function should be called. Also, when I click the button, the price() function should be called.
The problem is that when a user modifies the value of the input and clicks the button, the price() function is called twice. I don't want this to happen.
I tried the old-fashioned way, setting a variable "inPriceFunction" to true while entering and checking if it is not set before entering. This didn't worked because the two events (blur and click) are executed in the exact same time, the if and the variable set didn't had the time to occur.
How can I avoid that?
What I have tried:
<div>
<input type=text onchange="price();" />
</div>
<button onclick="price();" />test</button>
<script>
called = 0;
function price() {
if(called == true){
return;
} else {
called = true;
}
console.log("called");
called=false;
}
</script>

Underscore has you covered: http://underscorejs.org/#throttle
throttle will prevent your function being called twice within a
specified length of time.
once will prevent your function being called twice at all.

The click and change event do not happen at the same time. They happen one after another.
First, the "change" event is fired, setting called = true, then execute console.log("called"); and set called=false again.
Then, the "click" event is fired, but called == false, so it sets called = true; and then execute console.log("called"); and set called=false again.

Here's a jsfiddle that will do the job. You shouldn't use global variables, of course:
http://jsfiddle.net/SZe26/
var clicktimer = null;
function clickfunc() {
var BLOCK_TIME = 500;
function handleclick() {
console.log("Pressed!");
}
if (clicktimer) {
console.log("Skipping handling of click!");
} else {
handleclick();
clicktimer = setTimeout(function() {
clicktimer = null;
}, BLOCK_TIME);
}
}

The sim^pliest way to handle that might be to store a datetime whenver Price is called and use it to check if it has been called too recently.
if (refDate > new Date(10000 + (new Date())) { // 1 second delay?
return;
}
refDate = new Date();
It's likely that two calls to Date return the exact same date though (so no date manipulation would be required).

add a timeout, something like this
function schedludePrice() {
if(myTimeOut){
clearTimeout(myTimeOut);
}
myTimeOut = setTimeout('price()', 10);
}
this way if the function gets called twice in a short time by your blur and click event, the Price function will only be called once.

Check if mouse is down on a mouseout event- jQuery

I want to know if a user stops pressing a button. So I capture the $button.mouseup(...) and $button.mouseout(...) events. However, I want the mouseout event to only matter when the user is still pressing the mouse- Otherwise, it will fire whenever the user passes over the button.
Any ideas?

Check e.which, which indicates the pressed button.

A quick and dirty method would be to use globals (or closures; some way of giving both the mouseup and the mouseout functions access to the same variable):
var mouseIsUp = true,
onMouseUp = function () {
mouseIsUp = true;
// ...
},
onMouseDown = function () {
mouseIsUp = false;
},
onMouseOut = function () {
if (!mouseIsUp) {
// ...
}
};

Trigger event of auto popup list selection via javascript

I have previously entered value 1111, 1222, and 1333 into a HTML text input. Now if I enter 1 to the text input, it should popup a list with value 1111, 1222, and 1333 as available options. How do you trigger an event when any one of these options is selected?
I have a javascript function that performs a calculation on values entered into the text input via "onkeyup" event. This works very well if the user just enter value via keyboard. However, it does not work if the user is selecting a previously entered value from the auto popup list.
I know we can turn off the auto popup list by adding autocomplete="off" to the form/text input. But is there any solution to make it work with the auto popup list? I have tried all available event options including "onchange", but none of those works.
The HTML code is very simple:
<input id="elem_id_1" name="output" type="text" value="0" onkeyup="update();"/>
The js function is very simple too:
function update() {
var a = $('elem_id_1').value;
$('elem_id_2').value = a / 100;
}

Have you tried the onchange event? I'm not sure if it fires for auto-complete selection, but you could also try the onpropertychange event and check for the value property:
textInput.onpropertychange = function ()
{
if (event.propertyName == "value")
doCalculation();
}
This would also work on right-click->paste or right-click->cut, which wouldn't fire your calculation using your current method.
EDIT
It looks like you might have to use a combination of events and timers. Set an interval on focus of the edit and clear it on blur. I'd also use the onpropertychange for IE to make it more efficient and keep the keyup event to make it rather quick too.
//- If it's IE, use the more efficient onpropertychange event
if (window.navigator.appName == "Microsoft Internet Explorer")
{
textInput.onpropertychange = function ()
{
if (event.propertyName == "value")
doCalculation();
}
}
else
{
var valueCheck, lastValue = "";
textInput.onkeyup = function ()
{
doCalculation();
}
textInput.onfocus = function ()
{
valueCheck = window.setInterval(function ()
{
// Check the previous value against (and set to) the new value
if (lastValue != (lastValue = textInput.value))
doCalculation();
}, 100);
}
textInput.onblur = function ()
{
window.clearInterval(valueCheck);
}
}
If your calculation routine is tiny (like a simple mathematical equation), I would just leave out the previous value check and run the calculation every 100ms.