I need to detect the id of the element that generated an onchange event.
This code work in most modern browsers:
<input type="text" onchange="return onchange_handler(event);"
function onchange_handler(event) {
var id = event.target ? event.target.id : event.srcElement.id;
...
return false;
}
But it does not work in IE Mobile.
I have tried the following code, and at least the event is fired and the handler function is called, but window.event is not available when event handler is called:
<input type="text" onchange="return onchange_handler();"
function onchange_handler() {
var event = window.event; // <= evaluated as UNDEFINED
var id = event.target ? event.target.id : event.srcElement.id;
...
return false;
}
Is there any way to obtain a reference to the fired event? Or an alternative approach to know the id of the element that caused the event.
A workaround would be to pass the element to the callback: (untested)
<input type="text" id="mytextbox" onchange="return onchange_handler(this);"
function onchange_handler(element) {
var id = element.id;
...
return false;
}
Related
i'm using on HTML input fields the onblurevent to validate input directy after leaving the field. In the eventhandler look after the id of source element and call validation methods:
<input id="ex1" onblur="app.checkInput(event);" />
<input id="ex2" onblur="app.checkInput(event);" />
my JS-validation:
this.checkInput = function(event) {
var result;
if (event.srcElement.id == 'ex1') {
result = this.validateEx1();
}
else if ( event.srcElement.id == 'ex2') {
result = this.validateEx12();
} //...
This works fine in IE and Chrome, but the event parameter has in Firefox no Field 'srcElement'. Is there a way to make it compatible for all browsers?
Thanks for your help in advance.
Try with standards.
You can use target or currentTarget
event.currentTarget.id;
More info:
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
I have an markup
<div id="uploadControl" class="fileUpload1">
<label for="uploadFile" id="labelId">Choose File</label>
<input class="upload" type="file" id="uploadFile" />
</div>
javascript
window.onload = function () {
document.getElementById('uploadControl').onclick = function (event) {
// process the event only for the original source
if (window.event.srcElement.id === 'uploadControl') {
document.getElementById('labelId').click();
}
//prevent event propagation
window.event.cancelBubble = true;
};
}
I want to the label to fire a click event for the input File whenever the "upload control" div is clicked.
The problem is.... this works on IE and chrome but on firefox i get the message
"TypeError: window.event is undefined "
It seems like firefox doesnt support window.event code.
How can i make it work on firefox? please help
Firefox doesn't support windows.event object. Use these variables to store the value and it will work after that use your code:
var event = e || window.event
var assumed = (event.target || event.srcElement).id;
try this:
Tested and 100% working
You can Combine here event and this(element)
function postBackByObject(e,d) {
var target = e.target || e.srcElement; // Support IE6-8
if (d.id == 'uploadControl') {
document.getElementById('labelId').click();
}
target.cancelBubble = true;
}
<div id="uploadControl" class="fileUpload1"
onclick="postBackByObject(event,this);">
<label for="uploadFile" id="labelId">Choose File</label>
<input class="upload" type="file" id="uploadFile" />
</div>
I currently have some js for phone number validation that is using inline event listeners in the input field. I need to change this example so that instead of attaching the event listeners inline, I would be targeting the DOM element in jQuery and adding the event listeners. Here's a working example of what I have so far: http://jsfiddle.net/yVdgL/21/
window.mask = function (e,f){
var len = f.value.length;
var key = whichKey(e);
if((key>=47 && key<=58) || (key>=96 && key<=105))
{
if( len==1 )f.value='('+f.value
else if(len==4 )f.value=f.value+')'
else if(len==8 )f.value=f.value+'-'
else f.value=f.value;
}
}
function whichKey(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
return code
}
and
<input type="text" name="phone" id="phone" onkeydown="mask(event,this)" onkeyup="mask(event,this)" maxlength="13" />
I tried this but was unable to achieve the functionality that I need.
i have update you jsfiddle example:-
jQuery(document).ready(function(){
jQuery('#edit-phone1').keyup(function(event){
mask(event,this);
});
jQuery('#edit-phone1').keydown(function(event){
mask(event,this);
});
});
click here to see working example:-
http://jsfiddle.net/yVdgL/38/
or you can try :-
$(document).ready(function() {
$('#edit-phone1').on("keyup keydown", function(e) {
mask(e, this);
});
});
link for this is:-http://jsfiddle.net/yVdgL/56/
In older, pre-HTML5 browsers, $("#phone").keyup( function ) or keydown is definitely what you're looking for.
In HTML5 there is a new event, "input", which behaves exactly like you seem to think "change" should have behaved - in that it fires as soon as a key is pressed to enter information into a form. $("#phone").bind('input',function);
You never defined event.
jQuery('#edit-phone1').keyup(function(){
jQuery('#edit-phone1').mask(event,this); //<-- what is event?
});
just add it
Second issue is you are treating window.mask like a jQuery plugin and it is not a plugin.
jQuery('#edit-phone1').keyup(function(event){ //<-- add event here
mask(event,this);
});
(jsbin)
I created a table with a button inside.
The Table has onclick event and also the inside Button
But when Im pressing the button ,the event bubbles up to the table. ( and I get 2 alerts)
So I used ev.stopPropagation();
And its working. But in order for it to work , I had to do :
in html :
<input type='button' onclick='doWork(event);'/>
in Js :
function doWork(ev)
{
ev.stopPropagation();
alert('button');
}
Is this the correct way ?
Must I send the event ? I know that different browsers uses differently the event .
IE doesn't require passing event object and we can access it using window.event. Old IE versions have not supported e.stopPropagation. So, for cross browser compatability reason, you should try this:
function doWork(e)
{
var evt = e || window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
alert('button');
}
This is another way:
<table onclick="doWork();" border=2 style="width:70px;">
<input type='button' onclick='alert("button");'/>
function doWork(ev)
{
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.tagName.toUpperCase() !== 'INPUT'){
alert('table');
}
}
I can't see anything wrong with this, and yes, you need to parametrise the event so you can call stopPropagation() on it in your event handler.
The onKeyUp event is working in IE(7) and not in Firefox(4.0.1).
I have a textfield with attribute onclick="eventName();"
in the Javascript function eventName(evt). I do not have an event data, the event data is not sent by Firefox. In IE on the other hand window.event IS filled so here it works...
Both IE and Firefox reach the function just fine. Only problem is that I need the event data there.
Can anyone direct me towards a solution for this annoying problem?
Example page:
<html>
<head>
<script type="text/javascript">
function upperCase(evt) {
if (evt) {
var target = evt.target;
target.value = target.value.toUpperCase();
} else if (window.event) {
var target = window.event.srcElement;
target.value = target.value.toUpperCase();
} else alert('No event information');
}
</script>
</head>
<body>
<span>Enter your name: </span>
<input type="text" id="fname" onkeyup="upperCase()" />
</body>
</html>
IE handles events with a global. Everything else the event passed as the first argument to the function.
onkeyup="upperCase()"
You don't do anything with it in there. I'm not even sure you can — I haven't touched an intrinsic event attribute for anything but the most trivial toy in years.
Given
document.getElementById('fname').keyup = upperCase;
(or, better, using attachEvent / addEvent, the evt variable will be populated.)
To make this work in all browsers, pass the event to the function you're calling:
<input type="text" id="fname" onkeyup="upperCase(event)">
function upperCase(evt) {
if (evt) {
var target = evt.target;
target.value = target.value.toUpperCase();
} else if (window.event) {
var target = window.event.srcElement;
target.value = target.value.toUpperCase();
} else alert('No event information');
}
<input type="text" id="fname" onkeyup="upperCase(event)">
In some browsers such as IE, this works because event resolves to window.event, which always refers to the current event being handled. In other browsers (such as Firefox), this works because event is a variable that's in scope for the event handler. You can imagine the contents of the onkeyup attribute as being the body of a function that looks like
function(event) {
// Attribute value here
}
You forgot to actually pass the event as parameter, should be:
<input type="text" id="fname" onkeyup="upperCase(event)" />