I have this code which is supposed to hide and show a DIV by checking and unchecking a form checkbox using the control onChange event. It works in Chrome, Firefox, Safari and Opera but IE 8 and 9 refuse to cooperate... There are no error messages in the console. Anything I'm missing?
Thanks for any help!
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Demo</title>
<script type="text/javascript">
var divVisible = true;
function Passport() {
if (divVisible) {
document.getElementById('mydiv').style.visibility="hidden";
divVisible = false;
}
else {
document.getElementById('mydiv').style.visibility="visible";
divVisible = true;
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" onchange="Passport();" value="Passport">Passport
</form>
<div style="height: 100px; width: 100px; background-color: #ff0;" id="mydiv"></div>
</body>
</html>
According to this answer
onchange in IE only fires when the checkbox loses focus. So if you tab to it, hit space a few times, tab out, you'll only get one onchange event, but several onclick events.
You should change your code to use the onclick event instead:
<input type="checkbox" onclick="Passport();" value="Passport">Passport</input>
A checkbox input will not fire any change events until the focus is lost. The input value changes everytime it's clicked.
Change onchange="Passport();" for onclick="Passport();"
Change the onchange to onclick since IE8 fires onchange when focus is lost
And adjust it based on the state of the checkbox
<input type="checkbox" onchange="Passport(this.checked);" id="passportCB" value="Passport"><label for="passportCB">Passport</label>
and the function
function Passport(state) {
document.getElementById('mydiv').style.visibility= state ? "hidden" : "visible";
}
I also added a label, so the user can click the text and toggle the checkbox state.
Related
In an application I have a text input elements with an input handler. There is a special action I'd like to do on backspace so I added a keyup handler to handle this case. It doesn't gets called unless the field is empty - apparently when the input handler is called it suppresses the keyup handler.
I could probably rewrite the code using the keyup handler for everything but that would involve reproducing proper handling of pasting and other keys (delete, enter, tab, etc.), which I'd rather not do.
This is on chrome but I tested it on firefox and safari too and get the same behavior so it must be expected, but I can't find it documented. The following code demonstrates the issue. When loaded as is and text is entered only the input handler is called. When the field is empty the keyup handler is called. If the input handler is deleted then of course the keyup handler is called on every key press.
<html>
<head>
<script>
function setup() {
document.getElementById("xxx").addEventListener("input", (ev) => alert("input"));
document.getElementById("xxx").addEventListener("keyup", (ev) => alert("keyup"));
}
window.addEventListener("load", () => setup());
</script>
</head>
<body>
test handlers: <input type="text" id="xxx" />
</body>
</html>
(sample edited to use addEventListener rather than onevent)
The workaround I'm thinking about now is using a keydown event, which is called, but I'd like to understand why it has this behavior.
They are both getting called every time only the one alert is invalidating the other call as you can see if you change the alert to a log
<html>
<head>
</head>
<body>
test handlers: <input type="text" oninput="console.log('input')" onkeyup="alert('keyup')" />
</body>
</html>
or if you set a timeout
<html>
<head>
</head>
<body>
test handlers: <input type="text" oninput="setTimeout(()=>alert('input'),1000)" onkeyup="alert('keyup')" />
</body>
</html>
This is expected as a backspace is changing the input and a keyup is when a key is released and the keyup is released when the alert is in the window
Hello everyone and sorry for my english.
Following this jdfiddle, I have a problem I don't understand.
First I change the value of the input, then I click on the button and what I expected to see is "click" but I see "change" meaning onclick is called after onchange.
<input type="text" onChange="alert('change')" />
<button type="button" onClick="alert('click');">Click!</button>
I found on this post that it's because of chrome which fires onchange event before the onclick event. But I don't really have the same need as this post because my event are not declared in the same tag. And secondly, if I click on the button I would like to only execute the onclick function and not onclick and then onchange (this methods consists in using onMouseDown).
Do you have a good method to do that?
Ok so I can see that you really wan't this.
You could let the on change function run first, and then afterward see what has focus, if it is that button, you would know that it was clicked, and thus was the reason for loosing focus.
you cannot check this while the change function is running, as the body still has focus at this time..
<head>
<script language="javascript">
function focussed()
{
var triggerElement = document.activeElement
alert(triggerElement)
console.info(triggerElement)
}
function change()
{
alert("change")
setTimeout(focussed, 1)
return true
}
</script>
</head>
<body>
<input type="text" onChange="alert('change')" />
<button type="button" onClick="alert('click');">Click!</button>
</body>
I use jQuery to know my input changes .
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#id_back_ground_color").change(function(){
alert("hello");
});
$("#salam").click(function(){
alert("hey");
$("#id_back_ground_color").val('changed!');
});
});
</script>
</head>
<body>
<input id="id_back_ground_color" type="text">
<button id="salam" >
</body>
</html>
When I click on the button I get a "hey" alert but I don't get the "hello" alert. Why?
There's no link between a click on the button and an edit in the id_back_ground_color field.
The change event is sent to an element when its value changes. This
event is limited to elements, boxes and
elements. For select boxes, checkboxes, and radio buttons, the event
is fired immediately when the user makes a selection with the mouse,
but for the other element types the event is deferred until the
element loses focus.
From http://api.jquery.com/change/
Change this line
$("#id_back_ground_color").val('changed!');
to this
$("#id_back_ground_color").val('changed!').trigger( "change" );
I would like be able to register the changes on the web page from the text field id=frm1 without clicking on the page or on the Check button while the cursor is still blinking on the text field. I am currently using onchange event and it apparently does not register changes until I click out of the text field. Also any advice on the quality of the code/better/other way of doing this would be appreciated. I am also wondering why the value of element[0] is undefined. I am a beginner in JavaScript.
// JavaScript source file Operator.js
function checkNumber(document) {
var formNumber = document.getElementById("problem1");
var txt = "even";
var number = formNumber.elements[1].value;
if (number % 2 == 0) {
txt = "even";
} else {
txt = "odd";
}
document.getElementById("Result").innerHTML = txt;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>HmwkOperators</title>
<script src="Operators.js" type="text/javascript"></script>
</head>
<body>
<form id="problem1" action="form_action.asp">
<fieldset>
<legend>Problem1 verify number if it is odd:</legend>
Number: <input type="text" onchange="checkNumber(document)" id="frm1" autocomplete="off"><br>
<p id="Result"></p>
<input type="button" value="Check" onclick="document.Result.reload(true)">
</fieldset>
</form>
</body>
</html>
You could use the onkeyup event instead:
"The onkeyup event handler captures the moment at which a previously
pressed key is released while focus is on the element to which the
onkeyup attribute is applied."
In this case:
<input type="text" onkeyup="checkNumber(document)" id="frm1" autocomplete="off">
jsFiddle here
Note though, that it's always better to keep your markup (HTML) and scripts (JavaScript) separate.
Instead, you could use addEventListener:
var el = document.getElementById("frm1");
el.addEventListener("keyup", checkNumber, false);
jsFiddle here
AS stated in my comments, there are several events that may fill your requirements with varying results.
OnKeyUp - occurs when the user releases a key from its depressed position.
OnInput - is raised when an element value changes.
OnChange - Already tried, doesn't fit criteria
input.addEventListener("{TYPE"}, YourTrackingMethod);
FIDDLE TO TEST WITH
My opinion is that the key up event is what you are looking for, but beware browser differences in handling and event information.
Hi,
A button which is adjacent to an input. The button is hidden by default and will be visible when the input gets focus and it will be hidden again if the input loses focus.
I wrote a code to achieve that. But the problem is button's event is not being triggered since it is hidden the moment the input loses focus.
I am not getting any idea to achieve that.Can somebody help me.
Here is the code
<html>
<head>
<style>
.icon{
visibility:hidden;
}
</style>
</head>
<body>
<input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/>
<input type="button" class="icon" value="?" id="f4_1" onClick="alert('hi..')"/>
<script>
function onOver(f4Id){
document.getElementById(f4Id).style.visibility = "visible";
}
function onOut(f4Id){
document.getElementById(f4Id).style.visibility="hidden";
}
</script>
</body>
</html>
Note: Use pure javascript to achieve. Don't use any jQuery.
Thanks.
Actually, the order of these events varies between browsers. If I remember correctly, Internet Explorer will trigger the button if you click on it, whereas Firefox will not.
Anyway, the problem can be fixed by adding a small delay. Change your onOut function to:
function onOut(f41d) {
setTimeout(function(){document.getElementById(f41d).style.visibllity="hidden";},25);
}
Now the button will hide almost instantly. It should be unnoticeable to the human eye, but the computer can tell the difference and allow you to click the button.
Event handling is very important and understanding when they are fired is utmost important
onmousedown event will override onBlur effect of textbox ,which is what is required.
check working Example Here
<input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/>
<input type="button" class="icon" value="?" id="f4_1" onmousedown="alert('M Kicked')"/>
<html>
<head>
<style>
.icon{
visibility:hidden;
}
</style>
</head>
<body>
<input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/>
<input type="button" class="icon" value="?" id="f4_1" onmousedown="alert('M Kicked')"/>
<script>
function onOver(f4Id){
document.getElementById(f4Id).style.visibility = "visible";
}
function onOut(f4Id){
document.getElementById(f4Id).style.visibility="hidden";
}
</script>
</body>
</html>