function onkeydown(e) {
if (e.key === "enter")
e.preventDefault()
}
<ReactQuill onKeyDown={onkeydown}/>
Here iam unable to prevent the enter key.
What you are looking for is this.
function onkeydown(e) {
if (e.keyCode === 13)
e.preventDefault()
}
Since the keyCode of the Enter key event is 13
}
Related
In Alloy UI version is 2.0. is there any way to prevent closing dialog when esc key is pressed ?
One way to do this is to listen for the ESC press and prevent the dialog from hiding:
Y.one('body').on('key', function(event) {
modal.once('visibleChange', function(event) {
if (event.prevVal === true) {
event.newVal = true;
}
});
}, 'esc');
The above code attaches a one time visibleChange listener to the modal that ensures it will remain visible after ESC is pressed. Otherwise, the dialog can be hidden normally.
This may create a race condition though if the user presses ESC and immediately presses the X button. I'm not sure if the dialog would close in that case, but it seems pretty low risk.
Runnable Example:
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: 'Modal body',
centered: true,
headerContent: '<h3>Modal header</h3>',
modal: true,
render: '#modal',
width: 450
}).render();
Y.one('body').on('key', function(event) {
modal.once('visibleChange', function(event) {
if (event.prevVal === true) {
event.newVal = true;
}
});
}, 'esc');
});
<script src="https://cdn.rawgit.com/stiemannkj1/701826667a70997013605edcd37e92a6/raw/469fe1ae297e72a5a80eb9015003b7b04eac735e/alloy-ui-3.0.1_aui_aui-min.js"></script>
<link href="https://cdn.rawgit.com/stiemannkj1/90be22de7f48c729b443af14796d91d3/raw/a9f35ceedfac7fc0559b121bed105eaf80f10bf2/aui-css_css_bootstrap.min.css" rel="stylesheet"></link>
<div class="yui3-skin-sam">
<div id="modal"></div>
</div>
I am using GWT components for web page. In my page I used ten text boxes. I want to block "tab" key event for navigate one text box to another text box.
Expected Approach: If I pressed tab key it wont go to another text box.
You can do somthing like this.
window.onkeydown = function() {
if (event.keyCode == 9) {
event.preventDefault();
}
}
Use NativePreviewEventHandler and use the logic mentioned by Mayank Pandya, which is
if (event.keyCode == 9) {
event.preventDefault();
}
Check for the Tabkey keycode. I am not sure about it.
I'm writing a windows store app (HTML) that includes some simple rich-text editing. I can apply bold to the currently selected using a button which fires document.execCommand("bold",false,null);
However when I bind this to a keydown event like CTRL+B, nothing happens. Here's my keydown code.
document.addEventListener("keydown", catchShortCuts, false);
function catchShortCuts(e) {
if (e.ctrlKey) {
if (e.keyCode == 66) // b
document.execCommand('bold', true, null);
}
}
}
I know my keydown code works fine because if I replace the document.execCommand with another line of code it fires just fine when I press CTRL+B. It seems like execCommand has a problem with the keydown event?
Turns out that it works fine if you use keypress instead of keydown. Just in case anyone else has the same issue, that's a workaround. Still not sure why onkeydown doesn't work though.
Working code:
document.addEventListener("keypress", catchShortCuts, false);
function catchShortCuts(e) {
if (e.ctrlKey) {
if (e.keyCode == 66) // b
document.execCommand('bold', true, null);
}
}
}
I'm working on rails project as front end developer, and we use twitter bootstrap.. So i have some search modal, and when you type something and hits enter then ajax is called and there are results shown bellow search field..
$('#search_term').live("keyup", function(event) {
if (event.keyCode == '13') {
doSearch(this);
}
});
and when you hit enter there are 2 ajax calls..
I fixed this by calling die() before live and now it sends only one request, like it should have.. But I do not understand what was the problem?!
$('#search_term').die("keyup").live("keyup", function(event) {
if (event.keyCode == '13') {
doSearch(this);
}
});
Can anyone explain why this is happen?!
If with die() you fix the problem likely you are calling the live method more than one time.
$('#search_term').on("keyup", function(event) {
if (event.keyCode == '13') {
console.log("ENTER!")
}
});
$('#search_term').on("keyup", function(event) {
if (event.keyCode == '13') {
console.log("ENTER!")
}
});
(Refactored the code because .live it's deprecated)
Try this fiddle and open the developer console. If you press enter inside the input it will call the console.log() multiple times.
In this example you are adding new functions to the keyup event and the result it's that when a keyup is triggered all the functions will be triggered
Instead .die (now it's .off) remove the previous added functions. See this example:
$('#search_term').off("keyup").on("keyup", function(event) {
if (event.keyCode == '13') {
console.log("ENTER!")
}
});
$('#search_term').off("keyup").on("keyup", function(event) {
if (event.keyCode == '13') {
console.log("ENTER!")
}
});
Try now this modified fiddle and see that the function is called only once.
I am using jquery rich text editor jwysiwyg , i am able to submit the content on pressing enter key, by adding line
if(event.keyCode == 13) {
jQuery('#submit_button_id').focus().click();
}
in function $(this.editorDoc).keyup(function (event)
Problem now is shift+ENTER key also submit the value , cursor is not going to new line.
Is there any way such that on pressing shift+ENTER goes to new line.
Thanks in advance.
I think you'll have to store whether shift is down in a variable. So in keydown you'll have (in pseudocode):
if(event.keyCode === KEYCODE_SHIFT) shiftDown = true;
and in keyup the opposite
if(event.keyCode === KEYCODE_SHIFT) shiftDown = false;
and then in keyup check:
if(event.keyCode === 13 && !shiftDown) {
...
EDIT
Actually, you can probably just use the event.shiftKey property:
if(!event.shiftKey && event.keyCode === 13) {
...