I'd like to use the js method .click() as follows:
document.getElementById(id).click();
But since it is essential that it works, I was wondering of what browsers support the .click() method has.
The only browser I have encountered that does not support .click() is Safari. Safari supports .click() on buttons (e.g. <input type="button" />) but not on other elements such as anchor elements (e.g. Click Me).
For Safari, you have to use a workaround:
function click_by_id(your_id)
{
var element = document.getElementById(your_id);
if(element.click)
element.click();
else if(document.createEvent)
{
var eventObj = document.createEvent('MouseEvents');
eventObj.initEvent('click',true,true);
element.dispatchEvent(eventObj);
}
}
Using the above function, you can support 90%+ of browsers.
Tested in IE7-10, Firefox, Chrome, Safari.
According to MDN, HTMLElement.click() is supported by Chrome 20+, Firefox 5+ and Safari 6+. But that might be inaccurate.
I had this problem and used it instead of $('#selector').click(function(){});
, used (document).on('click','#selector',function(){});
Related
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.
I'm having a strange issue...
This works in chrome as expected but in safari it only gets .. glowing but doesn't react on key input..
this is the method that fires the text edition:
var namebloc = $(event.currentTarget).find('.column_filename');
var oldvalue = namebloc.html();
namebloc.attr('contentEditable', true).focus();
document.execCommand('selectAll',false,null);
namebloc.blur(function()
{
$(this).attr('contentEditable', false).unbind( "keydown" ).unbind( "blur" );
var newvalue = $(this).html().replace('"','"').replace(/(<([^>]+)>)/ig,"");
console.log(newvalue);
});
namebloc.keydown(function(e)
{
if(e.keyCode==27){ $(this).html(oldvalue);}//escape
if(e.keyCode==13){ $(this).blur(); }//enter
});
This is a screenshot in chrome when fired this works as expected...
and this is the result in safari.. no reaction to keyboard or mouse selection:
Any idea why and how to solve this in safari?
this is the HTML before the method is called :
<span field="filename" class="column_filename" style="width:763px;">eiffel (2).JPG</span>
This is when it's called (at the same time as screenshots)
<span field="filename" class="column_filename" style="width:763px;" contenteditable="true">eiffel (2).JPG</span>
Safari has the user-select CSS setting as none by default.
You can use:
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
To make it work.
In Safari, despite also being WebKit based, there is differing behavior when clicking on an element that has the user-select property set. Chrome seems to key-off that css property and prevent any focus going to the element that was clicked (thanks for continuing to develop a modern and sensible browser Google), while Safari does nothing with that css property regarding focus, and sets focus on the clicked element anyway.
One solution in Safari is to use a proper html button element, but this sucks from a styling perspective.
A better solution is to trap the mousedown event (the first to fire of the Mouse type events in a click), and preventDefault() on the event. This should work in any version of Safari.
For example
<span onclick="document.execCommand('bold', false);" onmousedown="event.preventDefault();">
<i class="material-icons">format_bold</i>
</span>
How can I handle the paste selected through right click in javascript?
I tried with "onpaste" event and all other html events available but nothing works.
The onpaste event should work in all modern browsers (UPD Including Opera >= 12.101).
Bind it in jQuery like this:
$('#txt').on('paste', function() {console.log('text pasted!')})
Here's a live example:
http://jsfiddle.net/7N6Xq/
In pure JavaScript it would look something like this for modern browsers
elem.addEventListener ("paste", handler, false); // all browsers and IE9+
and for old IE versions:
elem.attachEvent ("onpaste", handler); // IE<9
You can also combine it with oninput and other events (change, propertychange, dragdrop, etc.) to create a relatively bulletproof tracking of content change.
Footnotes:
1 Opera supports Clipboard API starting from Presto/2.10.286 which corresponds to 12.10 as suggested here. Blink versions of Opera (starting from 15) should also support it but I am unable to test it as there is still no Linux version.
The event isn't exposed by default as "onpaste" IIRC. You can do it quite simply in jQuery by issuing
jQuery(document).bind('paste', function(e){ alert('paste event caught') });
I was surprised question #4532473 got closed unanswered about what happens if you want to capture the afterpaste event. As this is probably the problem half of the cases a possible approach in firefox (tested) is to register an oninput event right inside the onpaste handler and remove the oninput handler as soon as it's done executing.
In ie the onpropertychange should be used instead of oninput. (not tested)
Nice pure JS solution (as requested...) is available on the Mozilla dev site
<!DOCTYPE html>
<html>
<head>
<title>onpaste event example</title>
</head>
<body>
<h1>Play with this editor!</h1>
<textarea id="editor" rows="3" cols="80">
Try pasting text into this area!
</textarea>
<script>
function log(txt) {
document.getElementById("log").appendChild(document.createTextNode(txt + "\n"));
}
function pasteIntercept(evt) {
log("Pasting!");
}
document.getElementById("editor").addEventListener("paste", pasteIntercept, false);
</script>
<h2>Log</h2>
<textarea rows="15" cols="80" id="log" readonly="true"></textarea>
</body>
</html>
The HTML5 oninput event is supported by some modern browsers, including Firefox 3.X
However, strangely, it only seems to work with inline JavaScript:
<input id = "q" oninput="alert('blah')">
When I try to set it using JavaScript code, it doesn't fire.
var q = document.getElementById("q");
q.oninput = function(){alert("blah");};
Is this just a bug in Firefox, or is there some reason this happens?
After downloading FireFox v3.6.27 and doing some test and search. I found my previous answer was wrong.
What I got is:
the oninput event property is supported in Firefox from version 4.
So to add a event listener in this case, you can do either
<input id = "q" oninput="alert('blah')">
or
q.addEventListener('input', function(){alert("blah");}, true);
But I prefer the later way. You can find reasons in addEventListener.
Also a similar function in IE attachEvent.
I'm trying to mimic Google suggestions over here: yous-design
It works perfect in Chrome/Firefox etc. but not in IE. I googled for it and it turns out that IE doesn't support the oninput event which in the code looks like this:
el("inp").oninput=function(){
addScript("http://www.google.nl/complete/search?callback=suggest&q="+this.value);
}
Instead I would have to use the onpropertychange event for IE. But when I replace the event it still doesn't work. I think this piece of code is counteracting:
$('#inp').keydown(
function (e){
var curr = $('#test').find('.current'); etc.etc.etc.
I think the keydown(/keyup) is counteracting with the onpropertychange event. But what should I replace keydown/keyup with? Are there any other alternatives at all? Should I rewrite the code?
I would suggest that instead of onpropertychange, use onKeyUp on IE.
onpropertychange is buggy in IE and doesn't fire for all keys (delete and backspace I think).