$("#inputBoxWidth").change(function() {
var curValue = $("#inputBoxWidth").val();
alert(curValue);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="inputBoxWidth">
</form>
When I press enter key in all browsers I get the alert function working except IE. In IE I have to click outside of the input element so the input looses focus and than it works. I need IE behave the same as other browser when pressing enter the alert popup shows up with the current value. How to do achieve that?
What you can do is use the keyup event.
Which gives you :
$("#inputBoxWidth").keyup(function() { // Your code });
Don't use the keydown event because if you want to get the value of the input it will give the value before the key was pressed.
:)
https://developer.mozilla.org/en-US/docs/Web/Events/change
According to QuirksMode Chrome and Firefox have been compatible for some time, but IE9 and earlier versions of IE10 have incomplete support.
You're going to have to write some conditional code that explicitly checks if the browser is IE and write a work-around.
Related
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.
i have the follow code:
<input class="any" type="text" id="myId" name="myName" />
this input is a jquery datepicker.. (http://jqueryui.com/datepicker/)
My JS is as follows:
$('#myId').keypress(function(evt) {
//codes
});
I tried keypress, keydown and keyup.. all not working in IE..
May be because of the jquery date picker plugin?
I also tried with jquery hotkey plugin (https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js)
But, no success :(
i just want to capture the enter event..
Any help?
Felipe
If the element doesn't exist on the page on the initial load, then the event may not be bound to the button. Not sure why it works in other browsers though.
Could possibly try this to see if it helps
$(document).on('keypress', '#myId', function() {
// ....
});
if you're using an older version of jQuery, then you'll need to use .live().
Solved: http://jsfiddle.net/MJWUw/
IE doesn't recognize a keyevent just with click in this input, but if i navigate until the field with tabspace it works..
i did a workaround to solve this, set the focus manually and it's working right now.
$("#myId").click(function(evt){$(this).focus();});
$('#myId').keyup(function(evt) {
alert('working!')
});
att
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.
I am using the keyup event to fire the same event as clicking on the search button when a user presses the return key. When the search button is clicked it uses an Ajax request to load search results on the page.
The call works fine, but the keyup event is being captured when I press the return button in the address bar in google chrome after previously having focus on the input box, e.g. if the user types in a search query without pressing return, and instead goes to a new webpage using the Google Chrome address bar, when they press return on the address bar the search in my page is being submitted at the same time as the keyup event is being trigger even though the page, and certainly the input box, should no longer have focus.
JavaScript
$("#search-box").on("keyup", function(event) {
if(event.keyCode == 13){
$("#search-submit-btn").click();
}
});
HTML
<div class="input-append"/>
<input id="search-box" type="text" />
<button class="btn" id="search-submit-btn">Search</button>
</div>
I'm also using Twitter bootstrap to style the Input box, but I don't think this is causing the problem.
I've tested this page in Firefox and Safari without any issue. Does Google Chrome have a problem with the keyup event/is this a know issue? I'm struggling to find any information on the issue.
EDIT
I think I've solved my issue by using keydown instead of keyup. I've also added in a check if the element is still focused, but I don't think this makes a difference, since it still has the same affect with keyup.
$("#search-box").on("keydown", function(event) {
if($("#search-box").is(":focus")){
if(event.keyCode == 13){
$("#search-submit-btn").click();
}
}
});
This appears to be an okay solution for me, but it doesn't explain why keyup behaves so strangely in Google Chrome though. If anyone has anymore information about why keyup is this way in Google Chrome or if I am just doing something wrong, I'd be very interested to hear.
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.