I want to disable all href links in my page. i am using the below code and it is working fine only in IE.
var elems = document.getElementsByTagName("*");
var len = elems.length;
for (i=0; i<len; i++) {
if(elems[i].tagName.toLowerCase() == 'a'){
elems[i].disabled = true;
}
}
but i want work it on all browsers.
can somebody please help me how to overcome this issue.
Thanks in advance.
If you don't want to change the href of the links, one could do this too:
window.onload = function() {
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
anchors[i].onclick = function() {return false;};
}
};
Working demo here: http://jsfiddle.net/jfriend00/9YkJQ/.
This is a very old thread but just in case someone else comes to this page, the disabled attribute can be set by using:
element.setAttribute('disabled', 'disabled');
This is recognized in all browsers and will disable the link. However, firing events on a disabled link is handled differently in different browsers & versions. FF & Chrome will still fire the onclick event where IE8+, not in compatibility mode, will not fire events. This is not necessary if there is no onclick event handler wired to the anchor, a normal href will not fire once the disabled attribute has been set. To stop the firing of the click event, the above code would work. The parens are not required and personally, I don't use them in this case as I assume parens are for grouping or for a function. Seems unnecessary in the solution provided before.
Related
I'm trying to implement a popup (bootstrap modal style) that would be triggered as web visitor leaves my site.
I tried different alternatives of:
$(window).bind('beforeunload', function(){
$("#sModal").modal('show');
return 'Take our survey before you leave.';
});
However, it didn't work in FF while worked fine in IE. I had another problem also, that the "Do you want to leave or stay" alert was being displayed on any link click on my website itself, across all browser types, as the whole page was being loaded.
I got around this by looping through all my anchor tags and adding a click listener to remove the beforeunload listener using:
window.onload = function () {
var allLinks = document.getElementsByTagName('a');
for (var i = 0; i < allLinks.length; i++) {
allLinks[i].addEventListener("click", removeBeforeUnload, false);
}
};
The removeBeforeUnload function just used the
$(window).unbind('beforeunload');
Getting back to actually make the popoup/modal appear on all browsers, i used the code from this stackoverflow answer after my document completes loading:
window.onbeforeunload and window.onunload is not working in Firefox , Safari , Opera?
This solution works great across all browsers, however now I cannot unbind this event on any of my local clicked links! I tried everything
window.removeEventlistener('beforeunload',null,false);
window.removeEventlistener('onbeforeunload',null,false);
window.removeBeforeUnload();
window.onbeforeunload = null;
I hope you can point me in the right direction and explain why I cannot unbind this event, that I used from stackoverflow answer.Thanks!
One thought is use a global variable flag and don't do anything in the unload event handler when flag isn't truthy. Set this flag to null or false in link click handlers
Then you don't really need to remove the listener
var doUnload = true;
$('a').click(function(){
doUnload = false;
});
function unloadhandler(){
if(doUnload){
// show modal , return message etc
}else{
// do nothing , don't return anything
}
}
Probably jQuery is adding a 2nd beforeunload event listener, which you can't remove via the DOM API the same way as the one added to the Window by default.
What should work for you is:
var allLinks = $('a');
for (var i = 0; i < allLinks.length; i++) {
$(allLinks[i]).on('click', () => {
$(window).off('beforeunload');
// now add any custom code you want for handling this event
$("#sModal").modal('show');
)};
}
I want to implement ElaticStack in my mobile website (mobile only). But I'm facing a problem: I have added a TAP ME in every slide and I want an alert box when user click on <a>. The alert is coming in desktop but not in mobile. Please check fiddle here
You should add a class to the element you want to attach the event, and then bind the touchstart event.
Something like this:
var elements = document.getElementsByClassName("myClass");
for(var i = 0; i < elements.length; i++) {
var element = elements[i];
element.addEventListener("touchstart", function (event) {
alert("touch!"); }, false);
}
I am trying to use ng-blur with an html input (type=number) element on firefox.
The problem I found is that when using the up and down arrows of the input number neither the blur nor the focus events are fired with firefox whereas with chrome works fine.
You can reproduce the issue in http://jsfiddle.net/chonw54e/
<div ng-app ng-init="focus=false;blur=false;active=false">
<input type="number" ng-class="{ myFocus: focus, myBlur: blur }" ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
<p>focus: {{focus}}</p>
<p>blur: {{blur}} </p>
</div>
Just load the page (with both firefox and chrome) and click on the up/down arrows of the html input number
input number
What am I doing wrong?
Thanks for the help!
EDIT: 11/12/2015
#Arg0n's solution fix the problem. However, it looks like a problem of either firefox or angularjs.
I have just created an issue on angular github here
It is not an angular problem. It is due to the firefox's event behaviour which don't focus the input when clicking the arrows inside the input (which in my opinion is a mistake).
EDIT: 14/12/2015
Firefox Issue created in bugzilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1232233
You can fix this with jQuery, see this fiddle:
JavaScript
$(function(){
$("input[type='number']").on("click", function(){
$(this).focus();
});
});
Without jQuery, see this:
JavaScript
document.onreadystatechange = function() {
if (document.readyState == "complete") {
var inputs = document.querySelectorAll('[type="number"]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].onclick = function() {
this.focus();
}
}
}
}
This will force the browser to focus on the input when it's clicked. (Input with type set to number).
A simple onclick="this.focus();" will work as nicely and much simpler if you have one field or using Angularjs's ng-repeat.
I have below code working fine in IE 9 but when I am going through Chrome I am getting the error 'element has no method"attachEvent"'. I tried using.on as well as addEventListener() still I am unable to get through. The element used here is a SharePoint people picker field. I am referring jquery 2.1.
Please advice if I am missing anything?
Code:
var element = getPeoplePickerRelControl("User", "div[Title='People Picker']");
if (element != null) {
$(element).focusin(function () {
_cardHolderInfo = getUserDetails(element.innerHTML);
});
// if(element.attachEvent)
element.attachEvent("onfocusout", manipulateLeaderProfile);
attachEvent is specific for IE only. If you want to attch any event in Chrome you should use addEventListener method. Attach events as shown below
if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){
element.attachEvent("focusout", manipulateLeaderProfile);
}
else{
element.addEventListener("focusout", manipulateLeaderProfile, false);
}
Hope this will help you.
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();