I'm trying to mimic Google suggestions over here: yous-design
It works perfect in Chrome/Firefox etc. but not in IE. I googled for it and it turns out that IE doesn't support the oninput event which in the code looks like this:
el("inp").oninput=function(){
addScript("http://www.google.nl/complete/search?callback=suggest&q="+this.value);
}
Instead I would have to use the onpropertychange event for IE. But when I replace the event it still doesn't work. I think this piece of code is counteracting:
$('#inp').keydown(
function (e){
var curr = $('#test').find('.current'); etc.etc.etc.
I think the keydown(/keyup) is counteracting with the onpropertychange event. But what should I replace keydown/keyup with? Are there any other alternatives at all? Should I rewrite the code?
I would suggest that instead of onpropertychange, use onKeyUp on IE.
onpropertychange is buggy in IE and doesn't fire for all keys (delete and backspace I think).
Related
I am using jQuery .ready function to add some ajax calls on text input to my registration page's TextBoxes.
It's all working fine on Chrome, Firefox and Safari, but won't work on Internet Explorer (I'm using IE11).
This is the code I'm using on $(document).ready():
$(document).ready(function () {
$(reg_user).on('input', function (e) { ValidateEmailPass(reg_user); });
$(reg_pass).on('input', function (e) { ValidateEmailPass(reg_pass); });
$(reg_email).on('input', function (e) { ValidateEmailPass(reg_email); });
$(reg_age).on('input', function (e) { ValidateEmailPass(reg_age); });
});
It fires the validation function every time the text changes in them. Although, I IE, it tells me reg_user is undefined which causes an error and it won't trigger these functions.
I'm using jQuery 1.11.3 which supports old versions.
If you know how to fix it, please tell me. I don't know what's really causing this problem. I think IE acts otherwise with $(document).ready().
Replace
$(reg_user)
with right element(s) selector (ID or Class). You can't create link (var reg_user) to DOM element before DOM will ready.
P.S. Also IE11 has some problems with input event.
Here's a good read.
The oninput event is supported in Internet Explorer from version 9. If
you need an event that fires when the contents of these elements are
modified in Internet Explorer before version 9, use the
onpropertychange event.
So instead, you could use change - which as the comments suggest doesn't do exactly the same, but it is cross-browser compatible. Also, you should use valid selectors instead of a global variable. This is simply bad practice and I don't know how this behaves on all browsers.
I am working on an application and i have use a property where a small change in textarea should alert the user, i tried onChange events, but that does not server the Purpose, i found onPropertyChange seems to be working fine in IE only, i had to make this application cross browser was looking something like an attribute of onpropertychange with other browsers. Looked at DomAttrModified, but that seems not working any idea, how can i do: Here is my below code:
$("#info").bind('keyup keydown keypress onDOMAttrModified propertychange', function(evt)
{ var keyCode = evt.which;
var text_area =$(this).val();
}
});
try
replace onDOMAttrModified with DOMAttrModified
$("#info").bind('keyup keydown keypress DOMAttrModified propertychange',
The HTML5 oninput event is supported by some modern browsers, including Firefox 3.X
However, strangely, it only seems to work with inline JavaScript:
<input id = "q" oninput="alert('blah')">
When I try to set it using JavaScript code, it doesn't fire.
var q = document.getElementById("q");
q.oninput = function(){alert("blah");};
Is this just a bug in Firefox, or is there some reason this happens?
After downloading FireFox v3.6.27 and doing some test and search. I found my previous answer was wrong.
What I got is:
the oninput event property is supported in Firefox from version 4.
So to add a event listener in this case, you can do either
<input id = "q" oninput="alert('blah')">
or
q.addEventListener('input', function(){alert("blah");}, true);
But I prefer the later way. You can find reasons in addEventListener.
Also a similar function in IE attachEvent.
I don't appear to be able to use the onkeyup event to detect when modifier keys, specifically the Alt key, is being released, reliably. Sometimes it works, sometimes it doesn't. Most of the time it doesn't, though.
My current code is:
document.documentElement.onkeyup = function(e) {
e = e || window.event;
if( !e.altKey) {
// do stuff here
document.documentElement.onkeyup = null;
}
}
Possibly related to Prevent default event action not working...? as I'm working in IE9 and the File menu pops up. I do dismiss the menu before attempting to trigger the event, though.
Not directly an answer to your question, but this might help you. It is a very detailed description on how browsers manage keydown/press/up.
I believe that typically a browsers key events take precedence over page defined ones. However, I would suggest using jQuery because I was just testing in IE9 and they seem to have overcome that problem.
Edit: While this seems to capture the event, I don't think it's possible to prevent IE from performing it's own events.
In text fields of my JSP, I wish to know whether user is typing in the data or just pasting.
How can I identify this using javascript ?
EDIT: As per Andy's answer I know how I can go about it, but still curios how those guys wrote onpaste event.
Safari, Chrome, Firefox and Internet Explorer all support the onpaste event (not sure about Opera). Latch onto the onpaste event and you will be able to catch whenever something is pasted.
Writing this is simple enough. Add the event handler to your input using html:
<input type="text" id="myinput" onpaste="handlePaste(event);">
or JavaScript-DOM:
var myInput = document.getElementById("myInput");
if ("onpaste" in myInput) // onpaste event is supported
{
myInput.onpaste = function (e)
{
var event = e || window.event;
alert("User pasted");
}
}
// Check for mutation event support instead
else if(document.implementation.hasFeature('MutationEvents','2.0'))
{
/* You could handle the DOMAttrModified event here, checking
new value length vs old value length but it wouldn't be 100% reliable */
}
From what I've read, Opera does not support the onpaste event. You could use the DOMAtrrModified event, but this would fire even when scripts change the value of the input box so you have to be careful with it. Unfortunately, I'm not familiar with mutation events so I wouldn't like to mess this answer up by writing an example that I wouldn't be confident of.
Count the key presses and make sure it matches whats in the text box a paste will not have complete number of characters as is in the text box.
You will never know for sure. Even when intercepting key input, the use may have used the context menu to paste using the mouse. Accessing the clipboard (to compare the input with the clipboard contents) will not work the way you want because it is a strict user-only operation. You are not able to access is programmatically without the explicit consent of the user (the browser will show a confirmation message).
I know for textarea you can capture on paste event using the onPaste event.
HTML:
<textarea id="textEditor" />
In JS:
var editor = document.getElementById("textEditor");
if (isIE /* determine this yourself */) {
editor.onPaste = function() {
}
} else {
//Not IE
editor.onpaste = function() {
}
}
//The capitalisation of the onpaste (non-IE) and onPaste (IE) makes a difference.
As for typing, there's onKeyDown, onKeyUp, onKeyPress events.
Hope this helps.
Possible SO-related question IE onPaste event using javascript not HTML