DOMAttrModified doesn't fire - javascript

I'm trying to trigger an event handler when a script modifies an input element (text field.) On Internet Explorer, I can use the onpropertychange event, but on Firefox and other browsers there is no such event. So, according to the W3C docs, it seems the DOMAttrModified event does exactly what I want. But it doesn't fire in Firefox 11.
Here's a simple code snippet which reproduces the problem. I have an input text field, and a button which adds a character to the value attribute of the input text field. Clicking on the add char button should cause the DOMAttrModified event to fire:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function addChar() {
var q = document.getElementById("query");
q.value += "X";
}
function loadevents() {
var q = document.getElementById("query");
q.addEventListener("DOMAttrModified", function() {alert("DOMAttrModified event!");
}, false);
}
</script>
</head>
<body onLoad="loadevents()">
<input type="text" id="query">
<br>
<input type="submit" value="add char" onclick="addChar()">
</body>
</html>
But it doesn't. Any idea what I'm doing wrong? (I know that DOM Level 3 deprecates this event, but there doesn't seem to be a viable alternative right now. As far as I know, Firefox 11 still supports it.)

Changing the value in an input doesn't fire the DOMAttrModified event, that's all..
You need to change the attribute of the input node, not the property of the variable.
It's like the difference between the two jQuery functions: .prop and .attr
Read:
Which HTMLElement property change generates DOMAttrModified?
this forum discussion

(repeating my answer from Which HTMLElement property change generates DOMAttrModified? here, because it's relevant to this question):
Please also note that NO DOMAttrModified events will be fired when the 'disabled' attribute is set. So if your event is not firing, that could be the reason. This also goes for the IE-only 'onPropertyChange' event.

Related

Setting the focus into input field

I'm trying to set the cursor into the input field. I'm using the functions focus() and select() but I don't know why it isn't working.
Any ideas?
<input type="text" id="test">
<p onmousedown="press()">Test</p>
<script>
function press() {
let input = document.getElementById('test');
input.focus();
input.select();
}
</script>
This was an interesting question that had me investigating a fair bit about the default behaviour of the mousedown event and the differences between that and click. Thanks!
The answer can actually be explicitly found in the Notes section of the MDN documentation for mousedown:
If you call HTMLElement.focus() from a mousedown event handler, you must call event.preventDefault() to keep the focus from leaving the HTMLElement
So to fix, do exactly that. Note that I've slightly rewritten your code in order to do that, using addEventListener to bind a JS function to the event, which then takes the event object as a parameter. (You could I think have done it your way using the global event object - but it's a bad idea to use that. Using addEventListener rather than inline JS that evaluates a string attribute and executes it as JS is also a much better, more modern approach.)
<input type="text" id="test">
<p id="button">Test</p>
<script>
button.addEventListener("mousedown", press);
function press(event) {
event.preventDefault();
let input = document.getElementById('test');
input.focus();
input.select();
}
</script>
The reason I believe this is necessary is that the mousedown event must have a default handler that causes the focus to go on that particular element - and this overrides your attempt to programatically place the focus elsewhere. I'm not 100% sure on that, but it's the most likely explanation that I can come up with.
Note that your original code works completely fine if you'd used the click event rather than mousedown - and this is more usual. The difference is that click only fires when the user releases the mouse button after the initial press, whereas mousedown fires instantly when the press happens. I can't see why this distinction would ever be important, and unless for some reason it's vital to you, I would recommend using click instead, rather than the fix above.

Putting text into an input element using key events and jquery

I want to put text into a textarea input element using key events in jquery. I know that it can be simply done with .val() or .html() functions but there's a reason that I want to put text using keyevents. The following is my code:
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p>In this example, the text field gets focus immediately after the document window has been loaded.</p>
<textarea id="myText"> </textarea>
<script>
$(function() {
document.getElementById("myText").focus();
$('#myText').focus().trigger({ type : 'keypress', which : 65 });
$('#myText').trigger(jQuery.Event('keypress', { keyCode: 65 }));
});
</script>
</body>
</html>
I have googled it and realized that there is two different ways of triggering events using jquery. I tried both but neither of which seem to be working.
It looks like your keypress event is getting fired, but since it is only an event I don't believe it is actually going to input your value into the field. If you're expecting something to happen on the keypress event from some other code you have, then there is some other issue.
If you demo with this fiddle you'll see the keypress event firing.
Try the code below to change the value of the input field with the new keypress value:
$(function() {
$('#myText').trigger(jQuery.Event('keypress', { keyCode: 65 })).val($("#myText")
.val() + String.fromCharCode(65));
});
The question is answered over there. Being short - key events won't change the actual input due to security reasons, but there is a plugin called "The $.fn.sendkeys Plugin" which can help you with a workaround.

JQuery blur event not firing in IE

I've got follow code:
$(document).ready(function() {
let element = $('.inputField');
element.on({
'input': function(e) {
console.log('input');
},
'blur': function(e) {
console.log('blur');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="inputField">
<input>
<button>Click here</button>
I use two events on my input. The first event is the input. I use this to detect if something was written in my input. The second one is the blur. With this event I detect if the focus on my input was lost (for example with tab into next input) or if the user clicked outside the input (for example on the button). Now this works fine on chrome. I also need it on internet explorer, but there the blur doesn't work. I looked at this questions:
jQuery blur event not firing
jQuery blur() or focusout() not firing in Internet Explorer
Blur event not working in IE11 and IE10
I could not find a solution to my problem. Any ideas? Thanks
Try to use ES5 syntax replace ES6.

Viewing dynamic pages

<!DOCTYPE html>
<html>
<head>
<script>
function init() {
document.getElementById("inputname").id = 'newinputname';
document.getElementById("newinputname").onchange = function() { Test() };
}
function Test() {
alert('Test');
}
</script>
</head>
<body onload='init()'>
Enter your name: <input type="text" id="inputname">
</body>
</html>
I can't to seem to find any way of viewing the altered page. For example in the above example, which has no purpose other than to illustrate, I would like to be able to see the effect of the onchange reflected. With say IE and F12 tools I can see the name change to the input element but can't see the onchange anywhere.
I have a piece of code which alters a table significantly, changes ids and sets onclick handlers. I would like to check that the changes have gone through. As above I can see the id alterations etc have worked OK and the onclick functions seem to work OK but I can't see where the onclick="..." has been entered in the new page output.
I think I may have some basic misunderstanding. Any help gratefully received.
Rather than adding attribute onchange, assigning document.getElementById("newinputname").onchange sets new event listener.
If you want to see events connected to element, you will have to use console.log and similar tools. See this answer: How to find event listeners on a DOM node when debugging or from the JavaScript code?

Is this a bug with Internet Explorer 8's onpropertychange event?

I'm using the onpropertychange event to detect changes to a textbox while the user is typing (i.e. before the box looses focus). This is working, however there appears to be a bug which occurs when I set the textbox value using using code. Doing so causes the onpropertychange event to fire, as it should, however the next change that the user makes to the textbox will not cause the event to fire. The change after the next change does fire the event however, and it continues to work normally until the textbox value is set using code again.
Steps to reproduce:
1) Add onpropertychange event as either an attribute of the textbox HTML element, or using the DOM. (document.form.TextboxName.onpropertychange = myHandler)
2) Observe that onpropertychange events are firing when textbox changes
3) Set textbox value using code (document.form.TextboxName.value = "New value")
4) Observe that this causes the event to fire
5) Change the textbox value using the keyboard (insert a latter, backspace or delete, etc)
6) Observe that no event is fired this time
7) Change the textbox value using the keyboard again. Events continue to fire as normal
First of all I'd like to get confirmation that this is indeed an IE bug, and that my code isn't to blame. I'm also looking for advise on how to work around this issue. I want to track all changes to the textbox value as they are made. The other events such as onkeydown are all limited in that they don't detect non-keyboard methods of modifying the value. This only needs to work in IE 8.
Edit: Code below. Running on my browser at home (IE9), the stated issue does not occur. However IE9 exhibits a bug where backspaces do not fire the onpropertychange event at all! Switching modes to IE8 standards (press F12 and choose browser mode) causes the code to run as stated in this post (events fire until the control's text value is set using code, in which case the next character entered will not fire the event.)
<!doctype html>
<html>
<head>
<script type="text/javascript" language="javascript">
var changingValue = false;
function onpropchange(){
if (window.event.propertyName == "value" && !changingValue) {
// Do stuff here
alert("Changed via user input");
}
}
function setTextBoxValue(val) {
var textBox = document.getElementById("foo");
changingValue = true;
textBox.value = val;
changingValue = false;
}
window.changeValue = function() {
setTextBoxValue("NEW VALUE");
}
</script>
</head>
<body>
<input id="foo" onpropertychange="onpropchange();">
<input type="button" value="change value" onclick="changeValue()">
</body>
</html>
This one worked for me with JQuery:
$('#foo').focus().val(val).blur();
Or
var textBox = document.getElementById("foo");
textBox.focus();
textBox.value = val;
textBox.blur();
The idea was to focus first before changing the value and then remove the focus after the value has been changed by the code. The next time the user presses a key, the onpropertychange will fire.

Categories