How to track inputs on a form with IE - javascript

I've alredy achieve that by doing:
$('#myforn:input').on("input", myMethod);
However, this method is not supported IE.
Another approach is proposed in other topics is something like this:
$('#myForm').on('propertychange input', function(ev){
myMethod()
});
Which doesn't work when there is input on my form neither.
So how could I achieve that?

This is what you are looking for:
$('#myForm').on('change', 'input', function () {
console.log(this, ' input was changed.')
});
If you also have textarea or select inputs, your code should use input, textarea, select:
$('#myForm').on('change', 'input, textarea, select', function () {
console.log(this, ' input was changed.')
});
Some inputs (like textareas) send the change notification only when they lose focus. You may want to use the keyup, keydown or keypress events too:
$('#myForm').on('change keyup keydown keypress', 'input, textarea, select', function () {
console.log(this, ' input was changed.')
});

Please always specify which version(s) of IE you're testing with, and also the version of jQuery.
These details are important because jQuery does fully support IE, so your code should work the same in IE as any other browser. If it doesn't then here are a few things to check:
You may be using a version of jQuery that is incompatible with your IE version. If you need to support IE8 or earlier, then you must use jQuery v1.x. jQuery v2 and v3 only support newer IE versions.
Check whether IE is rendering the page in Quirks mode. This will break compatibility with jQuery. Fix the page so that it uses standards mode.

Related

jQuery document ready not working properly on IE

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.

IE onpropertychange event doesn't fire

select
<input type="file" id="real-file-input" style="display:none" />
$('#select-handler').click(function(){
$('#real-file-input').click();
});
$('#real-file-input').bind('propertychange', function(){
alert('changed');
});
it's weird that when I use .click() the propertychange won't be fired.
Actually your code works fine in IE7 and 8 for me, whenever I change a value of input type ='file', the alert is fired. Whereas it is not working in >IE9 versions.
From paulbakaus's blog on propertychange on Internet Explorer 9
What’s wrong with propertychange on IE9?
IE9 doesn’t fire non-standard events when binding them through
addEventListener. Every modern JS library that uses feature
detection, including jQuery, will fail (see also:
http://bugs.jquery.com/ticket/8485). “Not a biggie” you say, “simply
use attachEvent directly” you say?
The good news: propertychange fires when using attachEvent. The bad
news: It refuses to fire when modifying any CSS properties on the
element that are unknown to the engine.. “Well this sucks,” you say,
“but I read you can use DOMAttrModified on IE9!” you say?
DOMAttrModified features exactly the same behavior. It does not fire
for unknown CSS properties. This is a complete disaster.
Many developers faces the same weird behavior.
Why do you want to use onpropertychange which is supported only by Internet Explorer?
I would rather move on to change event handler
$('#real-file-input').bind('change', function(){
alert('changed');
});
or if it is a HTML5 then input event handler.
$('#real-file-input').bind('input', function(){
alert('changed');
});
Unfortunately, IE9 doesn't support the "input propertychange" event on deleting. Escape, Delete and Backspace can be easily captured using the "keyup" event with event.which, but the selection of a text and deleting through right click -> delete does not fire the events propertychange, change, select or keyup/keydown.
I found no solution so far for this problem.
here's my code:
$('#search_input').on("propertychange input", function(event){
console.log('propertychange event');
// trigger search
});
$('#search_input').on("keyup", function(event){
console.log('keyup event', event.which);
if(event.which === 27) { // on ESC empty value and clear search
$(this).val('');
// trigger search
} else if(event.which === 8 || event.which === 46) { // trigger search on Backspace
// trigger search
}
});
$('#search_input').on("change input", function(event){
console.log('change event');
// trigger search
});
$('#search_input').on("select input", function(event){
console.log('select event');
// trigger search
});

JQuery binding events with propertychange and DomAttrModified

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',

keyup not working on dynamically loaded textareas

Other event types seem to work fine here - for example, mouseenter:
$("body").delegate(".textareas", "mouseenter", myalert);
But using keyup, or keypress - it wont work. I didn't change anything else in my code except the event type on this line. Example:
$("body").delegate(".textareas", "keyup", myalert);
I type in a textarea, but now myalert doesn't get called.
I'm using jquery 1.7.1.
You can use an on to bind
http://jsfiddle.net/Jy2rA/
$('button').click(function () {
$('body').append('<textarea>');
});
$('body').on('keyup', 'textarea', function() {
$('p').fadeIn(function(){$(this).fadeOut()});
});​
DOMSubtreeModified does more than I need for this, but at least it seems to notice any entered text too, so if anyone else runs into this same problem, that's what's sort of working for me until a better solution is found.

How can I block the keyup() event for a second in jQuery?

I'm doing a form validation in jQuery that alerts something when a forbidden character like #$#% is input by user. The problem is, when a user enters those characters, he uses the SHIFT key, so there are two keyup's.
How can I prevent the second one from happening?
if (!regex.test(lastCharacter)
alert('forbidden character');
Thanks a lot
You can bind on the input event which emits when input is changed, however this is only supported since IE9. Before that you can bind on the propertychange event (in IE only that is) which occurs when the value of an input changes. The example below will work in most browser also it might trigger the callback twice in IE9 so might need to check for input event support and act accordingly instead.
http://jsfiddle.net/X4qNf/
My bad here is the one with propertychange in it, try in IE if it doesn't work you might have to assign it the old way.
$('#boo')[0].onpropertychange = function() {};
http://jsfiddle.net/X4qNf/2/
I have no idea if this will work, but you get the idea:
$("#myInput").keyup(function(e) {
if(e.which == 16) {
$(this).keyup(function(event) {
if(event.which==16) event.preventDefault();
});
setTimeout(function() {
$("#myInput").off('keyup');
},1000);
}
});​

Categories

Resources