Develop Reference

e.preventDefault() & return false not working in firefox

Chrome :
Following code is working in Chrome.
$('.links').click(function(e) {
if(e.which == 2) {
console.log(e.which); // prints 2
//e.preventDefault();
//e.stopPropagation();
return false;
}
});
Firefox :
Since above code doesn't catch middle button / mouse wheel click event in firefox, I tried following which is able to catch mouse wheel click event.
$('.links').mousedown(function(e) {
if(e.which == 2) {
console.log(e.which); // prints 2
//e.preventDefault();
//e.stopPropagation();
return false;
}
});
Above code prints 2. But return false; is not working.
When I replaced console.log with alert then it works. But I can't & don't want to use alerts.
I tried mouseup, mousewheel events also. But it didn't work.
I tried attachEvent also but, I got an error(attchEvent is not a function).
I am using below mentioned js files :
jQuery-1.10.2.min.js
jquery.easyui.min.js
jquery-ui.js
jquery.ui.core.js
You can refer below links for more clarity.
jsfiddle.net/nilamnaik1989/vntLyvd2/3
jsfiddle.net/nilamnaik1989/2Lq6mLdp
http://jsfiddle.net/nilamnaik1989/powjm7qf/
http://jsfiddle.net/nilamnaik1989/q6kLvL1p/
Following are some good links. But anyhow it doesn't solve my problem.
event.preventDefault() vs. return false
event.preventDefault() vs. return false (no jQuery)
http://www.markupjavascript.com/2013/10/event-bubbling-how-to-prevent-it.html
I need your valuable inputs.

All click default actions should be cancelable. That's one of the points of this important event. However, certain browsers have exceptions:
IE 5-8 won't prevent the default on text inputs and textareas.
IE9/10 & Opera incorrectly un-check radio buttons when you click on another radio in the same group. It correctly doesn't check the new radio.
IE 5-8, Firefox, & Opera won't prevent the default on select boxes.
Firefox & Chrome feel that one radio button must be checked. If all are unchecked they’ll check the first one you click on, even if the default is being prevented.
See Events - click, mousedown, mouseup, dblclick for some more information.

I had the same issue with firefox, related with
preventDefault();
Everything was working well in Safari, Chrome, Opera and even in IE9 (not kidding)
But, after a lot of reading, I saw that the site was using and old jquery version (1.10), then updated to the latest one (2.1.4) the action was canceled even in Firefox.
Another thing to consider is that I used a variable named "keyPressed" like:
var keyPressed = event.keyCode || event.which || event.charCode
So it was easy for each browser to recognize the key event.
Hope this help!

I have faced the similar problem in FF on middle click.
The following script fixed me the issue and it works fine in FF as well.
$(document).on('click', $(".content"), function(e) {
if(e.button==1) {
e.preventDefault();
return false;
}
})

IE9 Not allowing inputs within button tags

In Internet Explorer 9, which I understand supports the function addEventListener, is giving me a strange error when I try to use the function here:
function addEvent(evnt, elem, func) {
if (elem.addEventListener) // W3C DOM
elem.addEventListener(evnt,func,false);
else if (elem.attachEvent) { // IE DOM
elem.attachEvent("on"+evnt, func);
}
else { // No much to do
elem[evnt] = func;
}
}
(Courtesy of another question here on SO)
I get the error:
SCRIPT5007: Unable to get the value of the property 'addEventListener': object is null or undefined.
It breaks on the line if(elem.addEventListener)
I am passing it document.getElementById('search'), which is a text input field; for evnt, I am passing it keydown, and for function I am passing:
function(e) {
if (!e)
{
var e = window.event;
}
// Enter is pressed
if (e.keyCode == 13)
{
search($("#search").val());
$("#search").val("");
$("#search").blur();
}
}
I have no problems with this in Chrome, Firefox, or Safari, but IE9 is giving me grief.
Edit
Okay I've gotten the JS to run properly by putting the eventlistener in inline, but I am still getting a problem, which appears to be the parent problem behind the whole thing here: document.getElementById('search') is returning null only in IE. It works in every other browser, and it is only this one element that is returning null.
Edit 2 - I've updated the question title to reflect the true problem here.
So the root of the problem now is that the <input> is not showing up in the HTML at all (though it does show up in the source code)...? I have the input field inside of a <button>, which works in every other browser perfectly, but not in IE. How can I fix this?

It is not valid to have an <input> inside a <button> consider putting it inside a <label> instead, or a <span> with a click handler and suitable CSS.

jQuery blur event fired twice in Chrome

I created a simple 'infinite' form with input fields.
Every time an empty input is focused it creates a new one, and on blur of an empty input field, the field is removed.
See example here
I use the following code to make it all happen:
var $input = $('<div/>').html( $('<input/>').addClass('value') );
$('form').append( $input.clone() );
$('form').on( 'focus', 'input.value', function(e) {
// Add new input if the focused one is empty
if(!$.trim(this.value).length) {
$('form').append( $input.clone() );
}
}).on( 'blur', 'input.value', function(e) {
var $this = $(this);
if( !$.trim(this.value).length ) {
console.log('REMOVING INPUT');
$this.parent().remove();
} else {
$this.attr('name', 'item-'+$this.val());
}
});
The problem is however, that in Chrome the blur event is fired twice when I switch to another application (⌘tab). This gives an error, because it is not possible to remove the node, since it's already gone:
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
Firefox seems to work fine.
So why is the blur event fired twice and how can I prevent that from happening?
EDIT - Tried the answer in this question, but no luck. Still get the error message in Chrome, what am I doing wrong?
See updated fiddle
Is there a way to check if the element still exists? Because the second time blur fires the node is removed. $(this).length still is non-zero though.

Please check if this fiddle is having the behaviour as you need it,
http://jsfiddle.net/EPxkh/8/
http://www.quirksmode.org/js/introevents.html
http://www.quirksmode.org/js/events_order.html
http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

This looks like a bug in Blink, there is a bug report about that on Chromium project's page:
http://code.google.com/p/chromium/issues/detail?id=253253

Detecting drag drop to HTML textbox?

I have a normal search box on my webpage. It is filled with text: Search this website
This text is removed when you click into the box to type your search query:
onfocus="if(this.value=='Search this website') { this.value=''};
But how can I detect when someone drags text from the page onto the search box, as I often do myself? onfocus is not triggered and the previous text remains.

You need to use the ondrop event, which will only fire if the ondragenter and ondragover events are cancelled. Turns out it's a bit trickier than that because the behavior is different in Firefox than IE, Safari and Chrome.
(function () {
var inp = document.getElementById("test"),
chg = false;
inp.ondragover = inp.ondragenter = function () {
chg = inp.value == "Drop here";
return false;
}
inp.ondrop = function (evt) {
evt = evt || event;
if (chg) {
this.value = evt.dataTransfer.getData("text")
|| evt.dataTransfer.getData("text/plain");
return false;
}
}
})();
Example - Firefox 3+, IE5+, Chrome and Safari. Near as I can tell, Opera doesn't support the event. At least you can get it working for 95% of your visitors though.
Drag Operations - MDC

Have you tried to use the onchange event?
BTW, there is a nifty little jQuery plugin called jquery-defaultvalue which handles all the corner cases for you. If you're using jQuery anyway, it's worth a look.

See - http://www.simplecoding.org/drag-drop-s-ispolzovaniem-html5.html , but page on the russian language (Google Translate would help).

focus doesn't work in IE

i have the following function
function change()
{
var input = document.getElementById('pas');
var input2 = input.cloneNode(false);
input2.type = 'password';
input.parentNode.replaceChild(input2,input);
input2.focus();
}
but focus() doesn't work in ie7, so what can i do!
i want to have the cursor inside of input!
thanks
update
great solution, thanks, but now it doesn't work in opera:(

For IE you need to use a settimeout function due to it being lazy, for example:
setTimeout(function() { document.getElementById('myInput').focus(); }, 10);
From http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/
For opera, this may help:
how to set focus in required index on textbox for opera
UPDATE:
The following snippet of code handles the case when the element is unavailable and retries after a short period - perfect for slow loading pages and/or elements not available until some time after.
setTimeout(
function( ) {
var el = document.getElementById( "myInput" ) ;
( el != null ) ? el.focus( ) : setTimeout( arguments.callee , 10 ) ;
}
, 10 ) ;

We hit the same issue. For focusing we are using General function which is applying settimeout solution mentioned in:
http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/
with 100 milliseconds.
Still on some screens it's not working properly. Especially when iframes are included.
There is another known and similar IE issue:
IE 9 and IE 10 cannot enter text into input text boxes from time to time ->
IE 9 and IE 10 cannot enter text into input text boxes from time to time
What I have noticed is when you have focus, without pointer, you can apply workaround by pressing TAB key (focus on next element) and than SHIFT+TAB which will return to our target element with focus and typing pointer.
In order to be sure we can type inside input we focus on random element and then on our target input.
$('body').focus();
n.focus();
So we applied the same solution in javascript/JQuery in our general focus function.
So there is an if statement
...
if($.browser.msie) {
setTimeout(function() { try {
$('body').focus(); //First focus on random element
$(n).focus(); //Now focus on target element
} catch (e) { /*just ignore */ } }, 100); //See http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/
} else { //Standard FF, Chrome, Safari solution...
...
To be sure since there is big regression we are still keeping solution with settimeout as a backup.
Tested on IE10, IE11, Firefox 45, Chrome 49.0.2623.87

IE7 does not support the focus() method. I don't see any method.

I've had the same issue and was able to get IE to work using code behind by making a SetInitialFocus function and calling it in my PageLoad function.
Take a look at the following example and give it a shot, it worked for me.
http://www.cambiaresearch.com/c4/df9f071c-a9eb-4d82-87fc-1a66bdcc068e/Set-Initial-Focus-on-an-aspnet-Page.aspx

function change() {
var input = document.getElementById('pas');
var input2 = input.cloneNode(false);
input2.type = 'password';
input.parentNode.replaceChild(input2, input);
setTimeout(function () {
input2.focus();
}, 10);
}

In Case you are looking to set focus in 1st input element of last row in table.Name of my div where i have kept my table is tableDiv and i am setting focus to last row's 1st inputtext
setTimeout(function(){
$($('#tableDiv tr:last').find('input[type=text]')[0]).focus();
},2);

#Bojan Tadic THANK YOU!
Below Code did the trick :)
$('body').focus(); //First focus on random element
I think the issue comes up when you use input and a placeholder. Managed so solved this thanks to this answer, I was missing that $(body).focus. Made this code to run only on IE so that all my inputs can be freely accessed by 'tabbing'. Previously when I had only tabIndex on my inputs I was able to move to the next one but focus wasn't complete and couldn't write anything in it.
This is complete code.
$('input[name^="someName"]').on('keydown', function(e){
var keyCode = e.which || e.keyCode;
if(keyCode === 9){
e.preventDefault();
$('body').focus();
var nextTabIndex = parseInt($(this).attr("tabIndex"));
nextTabIndex++;
setTimeout(function(){$('input[tabIndex=' + nextTabIndex +']')[0].focus();},20);
}
});

Its is very easy using jQuery, not sure why you are doing it the hard way :)
In this example I have a class assigned to the input field I want the initial focus set called initFocus. You can use any selector you want to find your element. from your code I would use $("#pas").focus();
$(".initFocus").focus();