Develop Reference

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

how to unbind/prevent context menu by keyboard (key #93) with FF?

I want to prevent the default event on key #93 (select, between alt gr and ctrl right on AZERTY keyboard).
This key open context menu like right click.
I tried :
$(document).off('keydown');
$(document).off('keyup');
$(document).off('keypress');
$(document).on('keypress', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
$(document).on('keyup', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
$(document).on('keydown', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
Nothing works... I have always the contextmenu.

After checking for a while, I've been headed to another question similar to this one, but with a very different matter.
In any case, since the problem is the context menu, you don't even need jQuery for such, and the solution (despite it WON'T always work in firefox because the user may set it to disable such) is this one:
document.oncontextmenu = function (e) {
e.preventDefault();
return false;
}
fiddle:
http://jsfiddle.net/0kkm1vq0/3/
Works on chrome as well, and you won't need to use the keyboard listeners.
Reference: How to disable right-click context-menu in javascript
(which is really the same as key #93).
** note that this will disable the right click too **.
EDIT:
Not sure if this is cross-browser (the UPDATED code below seems to be working for both chrome and firefox, didn't try IE and others though), but the event fired by key #97 seems to be identified as 1, while the click seems to be identified as key 3, so you can just:
(function($){
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$(document).on('keyup', function(e) {
e.which == 93 && e.preventDefault();
});
}
else {
document.oncontextmenu = function (e) {
e.which == 1 && e.preventDefault();
}
}
})(jQuery);
http://jsfiddle.net/0kkm1vq0/10/
To disable JUST the key and not the right click.

Close Bootstrap popover on esc keypress

I am trying to close bootstrap popover using ESC key press.
But it does not seem to be working when using:
$(document).keyup(function (event) {
if (event.which === 27) {
$('#example').popover('hide');
}
});
Here is the fiddle with bootstrap popover:
http://jsfiddle.net/mashinista/b2NKt/

The fiddle you included has the popover code, but not the escape code.
Add it and, as koala_dev pointed out, you should be fine:
Demo in fiddle
$('#example').popover();
$(document).keyup(function (event) {
if (event.which === 27) {
$('#example').popover('hide');
}
});
Also, this is very similar to how the modal escape function works

The problem with that arises when a tooltip is inside of a modal, because then the Esc key is expected to close the modal. It's a not good user experience if a user only wants to dismiss the tooltip but then the entire modal closes. So I would propose, if there are currently tooltips to dismiss, then a user will need to press Esc twice to close the modal (first time to dismiss tooltips), but otherwise once, as usually. Note: This is not ideal, especially for screen reader users, so take that as a food for the further thinking.
/**
* Accessibility: Close tooltips and popovers on ESC key (WCAG 1.4.13)
* Note: Using event capture:true to cancel the propagation preventing the modal to close at first (hence no `.on()` here)
* Tested with Bootstrap v3.4.1; Does not support IE 11
*/
$.fn.listenEscKeyToCloseOverlays = function () {
return this.each(function () {
if (("undefined" !== typeof $.fn.tooltip) || ("undefined" !== typeof $.fn.popover)) {
document.addEventListener('keydown', function(e) {
if ('Escape' === e.key) {
const $openTooltips = $('.tooltip');
const $openPopovers = $('.popover');
if ($openPopovers.length || $openTooltips.length) {
e.stopPropagation();
$openTooltips.tooltip('hide');
$openPopovers.popover('hide');
}
}
}, true);
}
});
};
$(document).listenEscKeyToCloseOverlays();

"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

textarea control - custom behavior enter/ctrl+enter

I have the following simple <textarea>
<textarea id="streamWriter" rows="1" cols="20" placeholder="Writer"></textarea>
Also I have the following jQuery/JavaScript code block:
$('textarea#streamWriter').keydown(function (e) {
if (e.keyCode == 13) {
if (e.ctrlKey) {
alert('ctrl enter - go down a line as normal return would');
return true;
}
e.preventDefault();
alert('submit - not your default behavior');
}
});
I'm trying to force the not to create a new line break on normal return keydown. But I want this behavior if Ctrl+Enter was typed instead.
This does detect the difference but is not forcing the behavior that I need.
If you've used Windows Live Messenger, I need the same textbox behavior. Enter to submit (In my case I will call a function but stop the textarea from going down a line) and Ctrl+Enter go down a line.
Solutions? Thanks.
Update:
$('textarea#streamWriter').keydown(function (e) {
if (e.keyCode == 13) {
if (e.ctrlKey) {
//emulate enter press with a line break here.
return true;
}
e.preventDefault();
$('div#writerGadgets input[type=button]').click();
}
});
The above does what I am trying to do. There is just the part to emulate enter press with a line break. Please let me know how to do this if you know.

Using keypress instead of keydown works a little better, however will not work with the Ctrl key; I switched to the shift key - jsfiddle.
Edit: As far as I can tell, you won't be able to use Ctrl key consistently cross browser because the browser uses it for it's own short-cuts. You would run into the same situation with the alt key.
Edit again: I have a solution that works with the Ctrl key - jsfiddle.
$('textarea#streamWriter').keydown(function (e) {
if (e.keyCode === 13 && e.ctrlKey) {
//console.log("enterKeyDown+ctrl");
$(this).val(function(i,val){
return val + "\n";
});
}
}).keypress(function(e){
if (e.keyCode === 13 && !e.ctrlKey) {
alert('submit');
return false;
}
});
Edit: This doesn't work 100%, it only works if you are not in the middle of text. Gonna have to work on a way to have the code work on text in the middle.
By the way... Why are you doing it this way? Wouldn't it be confusing to the user if they pressed enter to make a new line and the form all of a sudden submitted before they were ready?

Clear VanillaJS:
document.querySelector('#streamWriter').addEventListener('keydown', function (e) {
if (e.keyCode === 13) {
// Ctrl + Enter
if(e.ctrlKey) {
console.log('ctrl+enter');
// Enter
} else {
console.log('enter');
}
}
});

Kevin B's solution works well on Mac, but not on windows.
On windows, when ctrl +enter is pressed, the keyCode is 10 not 13.
Ctrl+Enter jQuery in TEXTAREA