On my application only inline handlers works.
This is part of my Javascript function
function onDeviceReady() {
alert('ready');
document.querySelector('#idCpf').onkeypress = alert('keypress');
document.getElementById("idCpf").onclick=alert("click");
}
And this is my part of my html code
<input type="tel" autocomplete="on" id="idCpf" onblur="alert('onblur')" placeholder="Seu CPF" required>
On onDeviceReady function only the first alert works, and onkeypress and onclick show me an alert when the function onDeviceReady without pressing, click or blur the input. But my code only works when I use inline handlers, like on input type.... onblur="alert('onblur')".
What is my problem?
document.querySelector('#idCpf').onkeypress = alert('keypress');
calls the alert('keypress'); and assigns the return value of alert('keypress'); as event handler.
alert('keypress'); is executed immediately and not when the event is triggered.
To assign event handler you must do,
document.querySelector('#idCpf').onkeypress = function () { alert('keypress') };
document.getElementById("idCpf").onclick= function () { alert("click") };
Related
I have this code
jQuery('#parent').on('click', jQuery('#fileInput'), function (e) {
jQuery(e.target).attr('data-fileurl', '');
jQuery('#parent').on('change', jQuery('#fileInput'), function (e) {
usefulFunction(jQuery(e.target);
}
}
The idea is to detect if cancel was chosen on file browse, and it succeeds at that.
The problem is if I click it again, then it will run the .on('chance') twice and thus run usefulFunction. Each click adds a change event handler. usefulFunction should only be run once for each time jQuery('#fileInput') is changed. How can I prevent this unexpected behavior?
You should use one method instead:
jQuery('#parent').one('change', jQuery('#fileInput'), function (e) {
^
...
I'm using a function from here on SO to reset a file input element.
<input type="file" id="image-file" />
JS:
function resetFormElement(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
e.stopPropagation();
e.preventDefault();
}
resetFormElement($('#image-file'));
Resetting it seems to work but it gives the type error for stopPropagation() and preventDefault() in the console
https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
You function looks like handler for UI event, so it wait that event-object will be passed as arguments
But when you call it manually -- it doesn't. If it is the only way you use the function - just remove redundant calls
function resetFormElement(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
Does anyone know how to make a simple JavaScript onclick event fire if the process of clicking the element causes an onchange event to fire elsewhere on the page? I've created a very simple page to demonstrate this problem:
<html>
<body>
<input type="text" name="test" id="test1" onchange="return change(event);" />
Bang
Boom
<script type="text/javascript">
function change(event) {
alert("Change");
return true;
}
function bang() {
alert("Bang!");
return true;
}
function boom() {
alert("Boom!");
return true;
}
</script>
</body>
</html>
If you click the bang link you get the Bang! alert. Boom gives you the Boom alert. And if you enter text in the text field and tab out you get the Change alert. All well and good.
However, if you enter text in the text field and, without tabbing or clicking anything else first, click either Bang or Boom you get the Change alert and nothing else. I would expect to see the Change alert followed by either Bang or Boom.
What's going on here? My change event returns true. How can I ensure that my click event is fired?
Okay... So it seems like it's time for a bit of an explanation.
Explanation
You encounter this error because the onchange event is triggered as soon as focus is moved away from the element. In your example the action that takes focuse away from the input element is the mousedown event which triggers as you click down on the mouse. This means that when you mousedown on the link it fires off the onchange function and pops up the alert.
The onclick event on the other hand is triggered on the mouseup event (i.e. when you release the pressure on the mouse - prove this to yourself by click, hold/pause, release on a onlcick event). Back to your situation... Before the mouseup (i.e. onclick) happens the focus is moved to the alert triggered from your onchange function.
Fix
There are a couple of options to fix this. Most simple change from using onclick="...." to onmousedown="....".
Alternatively, you could use setTimeout like,:
function change() {
setTimeout(function (){
alert("Change event")
}, 100)
}
I suggest the onmousedown method as preferred. The setTimeout method will fail if you click and hold on the link for more than the prescribed amount on the timeout.
The problem is that the alert() function grabs the event chain somehow, test this:
<html>
<body>
<input type="text" name="test" id="test1" onchange="return change(event);" />
Bang Boom
<script type="text/javascript">
function change(event) {
console.log("change");
return true;
}
function bang() {
console.log("bang");
return true;
}
function boom() {
console.log("boom");
return true;
}
</script>
</body>
As you'll see you'll get the expected behaviour in the console.
JSBin
Rather than try and replicate your problem, I just created the solution in jsFiddle.
I seperated your HTML and your JavaScript.
HTML
<input type="text" name="test1" id="test1" />
Bang
Boom
JavaScript
var test1 = document.getElementById("test1");
var test2 = document.getElementById("test2");
var test3 = document.getElementById("test3");
test1.onchange = function (event) {
alert("Change");
};
test2.onclick = function () {
alert("Bang!");
};
test3.onclick = function () {
alert("Boom!");
};
After making a change in the text box and click out side of it will trigger the onchange event, and the onclick events will still fire. If you are expecting the change alert to fire for each key stroke change onchange to onkeyup.
I have a form that contains input:
<input onchange="checkDomain(true); return false;" type="text" id="dsearch" value="" name="domain" maxlength="30"/>
Which works just fine in Opera, Chrome and IE - but Firefox and Safari are having problems with calling the function checkDomain(). I added a line into the function for debugging:
function checkDomain(check)
{
console.log('checkDomain() called!');
// do rest of the stuff...
}
So, Chrome/Opera/IE calls the function with no problem after you enter text and click somewhere else - but Firefox/Safari doesn't. Anyone have a clue?
I cannot remember where I read it, but you should use .keydown()/.keyup()/.keypress() (whatever suits your needs) instead of onchange. At least for input[type=text].
you can use .blur() and .focus for their respective purposes too.
Seeing this in your question: "after you enter text and click somewhere else", makes me conclude you need the .blur() function.
$("input[type=text]").blur(function(){
console.log('checkDomain() called!')
});
maybe onblur is best for this:
<input onblur="checkDomain(true); return false;" type="text" id="dsearch" value="" name="domain" maxlength="30"/>
This problem happens when you change the behavior of your input keypress and key down.
You need to manually call the onchange trigger to fire it.
As an example consider you have a jQuery function for your inputs which do some stuff when user clicks on keyboard.
You need to call input.trigger("onchange"); to make sure the onchange is fired after keypress and keydown
/**
* Keyboard Manager
*/
(function($) {
$.fn.inputManager = function(options) {
};
options = $.extend(defaults, options);
// The key down event only use to manage key board language changes
var keyDown = function(e) {
//Do something
};
var keyPress = function(e) {
//Do something
};
return this.each(function() {
var input = $(this);
//The Firefox dose not trigger the input onchange when you change keypress and key down
//functions. So manually call it!
input.keypress(function(e) {
keyPress(e);
input.trigger("onchange");
});
input.keydown(function(e) {
keyDown(e);
input.trigger("onchange");
});
});
};
})(jQuery);
The onFocus event keeps firing on page load and doesn't seem to work when the element goes into focus. I only want the alert to fire off when the the input comes into focus not on page load
//Input
var input = document.getElementById('phonenumber');
//onfocus execute function
input.onFocus = alert('test')
You're calling the function alert and assigning its return value (undefined) to the focus handler. Try this instead:
input.onfocus = function() { alert('test'); };
Or, perhaps more understandably:
function inputFocused() {
alert('test');
}
input.onfocus = inputFocused;
Note that there are no parentheses after inputFocused in the assignment. We want to set onfocus to the function itself, not to the result of calling the function.