Develop Reference

Intercepting Paste action on a div only works after right clicking

I am working on a project in which I need to intercept a paste action that is being performed on a div (must be a div, can't be a text box). Right now I am binding the event after the div has focus (you've clicked on the div):
$('#result').unbind().click(function () {
$(this).focus();
$('#result').unbind().on('paste', function () {
console.log('paste behaviour detected!');
});
}); //NOTE: I have also tried. result.bind, result.unbind.bind, onpast="function()"
//(in the HTML), and a couple of other things.
I have also tried changing around the flow of the class (no change).
One more thing. I am using chrome/opera to develop. When I test this on firefox it works just fine. Is there anything I can try to fix this or did I stumble upon a bug?
NOTE: I am leaving out info about the project for simplicity, but if you need more context I can provide it.
Edit: I am pasting in to a div so there is no rightclick>paste button. This is solely with ctrl+v.

You can detect the combination of ctrl/cmd + v keys as well:
$(document).ready(function() {
var ctrlDown = false,
ctrlKey = 17,
cmdKey = 91,
vKey = 86;
$(document).keydown(function(e) {
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
ctrlDown = true;
}
}).keyup(function(e) {
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
ctrlDown = false;
}
});
$(document).keydown(function(e) {
if (ctrlDown && e.keyCode == vKey) {
alert('PASTE DETECTED');
}
});
});
});
https://jsfiddle.net/ufskbo0a/1/
You can use the clipboardData api in most browsers to get the data:
window.clipboardData.getData('Text')
http://caniuse.com/#search=clipboardData

Prevent enter default keyboard event in TinyMCE

We've been busy with upgrading TinyMCE from 3.x to 4.2.5 and can not prevent the default ENTER action from happening.
Our goal is to submit the form when CTRL + enter is pressed, and important is that the submit should happen before the newline is added to TinyMCE. The 3.x branch allowed us to add the event to the top of the queue:
// Important: inject new eventHandler via addToTop to prevent other events
tinymce.get('tinymce_instance').onKeyDown.addToTop(function(editor, event) {
if (event.ctrlKey && event.keyCode == 13) {
$("form").submit();
return false;
}
});
Unfortunately we can not figure out how to add it to the top of the events again.
event.preventDefault() and event.stopPropagation() do not have the expected effect because the enter is already there. The weird thing is that it does work on other keys, the alphanumeric keys can be prevented. http://jsfiddle.net/zgdcg0cj/
The event can be added using the following snippet:
tinymce.get('tinymce_instance').on('keydown', function(event) {
if (event.ctrlKey && event.keyCode == 13) {
$("form").submit();
return false;
}
});
Problem: the newline is added to the TinyMCE content earlier as our event handler is called, so an unwanted enter is stored. How can I add the event to the top in the 4.x branch, or prevent the newline from happening?

event.preventDefault() works when you attach the keydown event via the setup on the init function.
tinymce.init({
selector:'textarea',
setup: function (ed) {
ed.on('keydown',function(e) {
if(e.ctrlKey && e.keyCode == 13){
alert("CTRL + ENTER PRESSED");
e.preventDefault();
}
});
}
});
This does block the carriage return from happening. JsFiddle
Edit:
Above is one way of doing it, I have found another way of achieving the result which doesn't require the init at all. Instead we create a new Editor instance and bind to our textarea given it has an id.
HTML
<form>
<!--Select by ID this time -->
<textarea id='editor_instance_1'>A different way</textarea>
</form>
JS
var ed = new tinymce.Editor('editor_instance_1', {
settings: "blah blah"
}, tinymce.EditorManager);
//attach keydown event to the editor
ed.on('keydown', function(e){
if(e.ctrlKey && e.keyCode == 13){
alert("CTRL + ENTER");
e.preventDefault();
}
});
//render the editor on screen
ed.render();

var init {
...,
setup: function (ed) {
ed.on('keydown', function (e) {
if (e.ctrlKey && 13 === e.keyCode) {
e.preventDefault();
$("form").submit();
}
});
};
tinymce.init(init);
Works for tinyMCE 4.x

Maybe I'm late, but this answer is for those who cannot(or don't want to) change init setup for tinymce. I found following method:
var frame = document.getElementById('id_of_editor_iframe');
var iframeDocument = fr.contentWindow.document;
iframeDocument.addEventListener('keydown', function(e) {
if (
[38, 40, 13].indexOf(e.keyCode) > -1 //Enter and up/down arrows or whatever you want
) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
// your code here
return false;
}
}, true);
It helped me to prevent new line in editor

Catching events for mousewheel when Firefox is autoscrolling

I know there are many questions asking how to prevent the autoscrolling mode that Firefox activates when a page is bigger than the viewport and you press the middle mouse button.
But what I actually need is just being able to detect the mouseup event, when autoscrolling is active. The event just doesn't seem to propagate, so I don't know when (and more important where) the mouse button is released.
I could also settle for detecting when the autoscrolling mode is gone and the mouse usage is back to normal.
I've prepared a Plunk to play with. When it starts, middle click anywhere and the text in the box will update. If you press the button, more content is added to the page: middle click will activate autoscrolling and the mouseup event is lost forever.
Link

Does this give a result?
$(selector).live('mouseup', function(e) {
if(e.which == 1) {
alert("left");
}if(e.which == 3) {
alert("right button");
}else if(e.which == 2) {
alert("middle button");
}
e.preventDefault();
});

$(document).ready(function(){
$("your id").on('mousedown', function(e) {
if( (e.which == 1) ) {
alert("left button");
} else if( (e.which == 3) ) {
alert("right button");
} else if( (e.which == 2) ) {
alert("middle button");
}
e.preventDefault();
}).on('contextmenu', function(e){
e.preventDefault();
});
});
http://jsfiddle.net/p49nF/
Hope,this helps.!!!

Got it.
Even tho' Pieter's answer is not correct, it gave me the correct idea.
For some reason if you preventDefault() in the mousedown handler, the mouseup one starts working.
$(document)
.on("mousedown", function(e) {
if (e.which !== 2) return;
$("#h").text("MouseDown");
e.preventDefault();
}).on("mouseup", function(e) {
if (e.which !== 2) return;
$("#h").text("MouseUp");
});
Plunk with the solution

"Enter" Keypress to Submit the Form is not working in IE 9/10

$(function(){
$('.inviteClass').keypress(function() {
if(event.keyCode=='13') {
doPost();
}
});
Here I have one small requirement. Pressing keyboard Enter to submit the form and it is working fine in FireFox and Chrome, as well as IE 7 and 8, but it is not working in IE9 and IE 10.
Please help me.

Points to note:
You are missing a closing bracket.
Also, change the selector to window
Use .on() function
Use the .which property of event. See jQuery documentation
The keycode is an integer - remove the quotes
Add a return false; to stop the event from bubbling to the form (and possibly submitting the form twice). See Submitting a form on 'Enter' with jQuery?
Final code:
$(function() {
$(window).on('keydown', function(event) {
if(event.which == 13) {
doPost();
return false;
}
});
});

try
$('.inviteClass').keypress(function (e) {
c = e.which ? e.which : e.keyCode;
if (c == 13) {
doPost();
e.preventDefault();
return false; //<---- Add this line
}
});

you must use jQuery's event.which, also change '13' to 13 (a closing bracket was also missing):
$(function(){
$('.inviteClass').keypress(function(event) {
if(event.which == 13) {
doPost();
}
});
});

Please Try to use keydown event and also pass the event object in the function like this
$(function(){$('.inviteClass').keydown(function(event){if(event.keyCode=='13'){doPost();}});
or
$(function(){$('.inviteClass').keypress(function(event){if(event.keyCode=='13'){doPost();}});
Hope this will help you
Thanks

how do i prevent scroll down in javascript?

ok... I might be a lazy one to search but it is a bit annoying that all I can find is
"how can i set scroll down event" when I searched "how do i prevent scroll down".
in my javascript code, I set event for down arrow key. When I press down arrow
from the browser, the browser not only does an event I set, but also does
scrolling down the page which is not I intended to. So here is my question.
How can I disable scroll down function which occurs when I press down arrow?
any help will be appreciated.

If you want to prevent the vertical scrollbar and any vertical scrolling action by the user, you can use this javascript:
document.body.style.overflowY = "hidden";​
Or, this can also be set with a CSS rule:
body {overflow-y: hidden;}
On the other hand, if what you're trying to do is to prevent the default key handler for the down arrow from doing anything after you process the down array, then you need to call e.preventDefault() like this:
function myKeyDownHandler(e) {
// your code here
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false; // older versions of IE (yuck)
}
return false;
}
A cleaner way if you need to do this in more than one place would be to make your own cross browser function for this:
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false; // older versions of IE (yuck)
}
}
function myKeyDownHandler(e) {
// your code here
preventDefault(e);
return false;
}
This is one of those perfect examples where a cross-browser framework (jQuery/YUI/etc) saves you time because they've already done all this cross-browser work for you.
Here's an interesting article on preventDefault and stopPropagation().

Here is an example page that doesn't allow for the use of the arrow keys for scrolling:
<script>
document.onkeydown = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
if (keyCode >= 37 && keyCode <= 40) {
return false;
}
};
</script>
<body style="height:3000px;">
</body>