This works great in Chrome:
$('body').bind({
paste : function() {
if(!$('input, textarea').is(':focus')) {
alert('you used ctrl/cmd + v');
}
}
});
However it doesn't seem to work in Firefox ESR (haven't tested latest version). What adjustments need to be made?
jsFiddle
Related
I have this snippet:
function focusChanged(event)
{
// setTimeout(function() {
console.log('focus now: ' + document.activeElement);
console.log(document.activeElement.matches(':focus'));
//}, 0);
}
<div class="editor one" contenteditable="true" onfocus="focusChanged(event)">click here to focus</div>
Without the timeout, the following returns false:
document.activeElement.matches(':focus')
false
The console is not open (as suggested in document.activeElement.matches(:focus) is false. why is this?)
This happens in WebKit/Safari. Can anybody explain why this is happening? Thanks!
EDIT:
Maybe some more background: I only discovered the above problem after running into a problem with jQuery's .is(':focus'). I have an old project that still uses jQuery v1.9.1.
This code: $('.editor').is(':focus') worked fine for years. Only with the latest update to macOS Catalina 10.15.4 did this start to return false even when the div has the focus. I then tried to use a vanilla JS solution and ran into the above issue.
Some events are implemented slightly differently across browsers. It would appear that on WebKit-based browsers, the element isn't considered "focussed" until after the event handlers have run, but on Blink-based browsers (Chrome, etc.), despite it being a fork of (part of) WebKit, it's considered focussed during the event handlers.
Your solution of allowing the event to complete seems like a solid workaround.
I've put together a compact little bit of code to change the styling of a selection of text.
It almost seems too simple.
Please see my jsfiddle for reference.
I can get this to work in IE10, and FF, but it won't work in IE9 or Safari.
Is there any way to get it to work with those browsers?
Thanks
jsfiddle: http://jsfiddle.net/Yd3u8/27/
$(".styleEvent").click(function(e) {
var styleType = e.target.id;
styleEvent(styleType);
});
function styleEvent(style) {
document.execCommand(style);
}
Try something like this:
function styleEvent(style) {
document.execCommand(style);
if(style=="subscript"){style="line-through";}
if(style=="superscript"){style="overline";}
if(style=="bold"){document.getElementById('editor').style.fontWeight= "bold";}
document.getElementById('editor').style.textDecoration=style;
}
Working fiddle: http://jsfiddle.net/robertrozas/Yd3u8/30/
I made this jsfiddle to demonstrate what I am meaning, but unfortunately JSfiddle itself doesn't seem to work with IE8 so you need to test this jsfiddle code in a stand alone page:
http://jsfiddle.net/4Bdbn/
With IE8 the above ON events does not fire, absolutely nothing happens. even adding an alert("hi") to the function does nothing; it doesn't get called, plus no errors are reporting in the console.
On a side note, is e.preventDefault() necessary to prevent a function being executed multiple times when you have multiple events triggering the same function, such as .on("touchstart click",....? In all situations?
jQuery version 1.8.3 so I believe IE8 is a supported browser.
ps. Im using IE10 in Browser Mode IE8.
EDIT: My simple test page which is not working in IE8 (for me):
http://www.personaltrainer.com.au/test.php
The relevant code section is...
<script type="application/javascript">
$(document).ready(function () {
$("body").on("click touchstart",".something",function(e) {
$(this).text($(this).text() + " "+e.type);
e.preventDefault();
});
});
</script>
Thanks!
You're using an invalid type attribute (application/javascript) on your script tag. Change it to text/javascript or simply remove it all together.
This works just fine in IE8 (real version)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("body").on("click touchstart",".something",function(e) {
$(this).text($(this).text() + " "+e.type);
});
});
</script>
maybe you should remove the touchstart event first to check if it works! IE8 actually dosn't support touch action!
$(function () {
$("body").on("click",".something", function(e) {
$(this).text($(this).text() + " " + e.type);
//e.preventDefault();
});
});
YAHOO.util.Event.on("divName", "mouseenter", function (e) { }
This code is working in all browsers except chrome. Is there any issue with YUI 2.x for chrome.
As an alternative, it worked in all browsers when I used the following code.
document.getElementById("divName").onmouseover = function() {
// code to run when the user hovers over the div
};
I am currently trying to make some jQuery hover effects render correctly in all browsers. For the moment, firefox, IE, opera all do what they are supposed to. However, Safari and Chrome do not.
The code looks like this:
<div id="button1">
<div id="work_title" class="title_james">
WORDS
</div>
</div>
<div id="button2">
<div id="work_title" class="title_mike">
MORE WORDS
</div>
</div>
and the script effecting it looks like this
<script>
$(function() {
$("#button2").hover(
function() {
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
}, function() {
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
});
});
$(function() {
$("#button1").hover(
function() {
$(".title_james").css('width', '785px')
}, function() {
$(".title_james").css('width', '')
});
});
</script>
what I am trying to get it to do is change the css styles two elements on hover over two large areas of text..
I have tried the mouseenter .addClass and mouseleave .removeClass thing and that didn't work at all.. so when I got this to work in firefox I was all happy... then I did cross browser checking and I got sad again..
You can see it live in action at:
http://roboticmonsters.com/who
Using the dev tools in Chrome it says there is an invalid token at the end of each of the javascript functions. The IE dev tools shows an invalid token too, but it seems to ignore this and render correctly. Check your source and remove the token, if you can.
IE:
Chrome:
$.css takes an object:
$("#james").css({'z-index': '100'});
Note the curly braces and colon (not comma).
This is so you can specify several css rules in one:
$("#james").css({'z-index': '100', 'height': '100px'});
If you are getting the value of a css rule, just pass in the name as a string:
$("#james").css('z-index'); // returns 100
It's possibly because you are trying to bind to those events before the DOM has loaded.
I didn't have much time to give you an answer as to why it was broken, but the following works for me in chrome.
$(document).ready(function() {
$("#button2").hover(function() {
$("#james").css('z-index', '100');
$(".title_mike").css('width', '590px');
},
function() {
$("#james").css('z-index', '');
$(".title_mike").css('width', '');
}
);
$("#button1").hover(function() {
$(".title_james").css('width', '785px');
},
function() {
$(".title_james").css('width', '');
}
);
});
if just use the code below it works fine:
$("#button2").hover(
function() {
$("#james").css('z-index', '100')
$(".title_mike").css('width', '590px')
}, function() {
$("#james").css('z-index', '')
$(".title_mike").css('width', '')
});
Otherwise Chrome reports: Unexpected token ILLEGAL. To see this yourself, right-click on the page and choose inspect element. Click the small red x in the bottom right.
Update: actually your code works fine if you remove the illegal character as shown in #anothershubery's answer