Since I'm using canvas to render typed text and need to use other key events like backspace, forward delete, tab and arrow keys, I need patibility between browsers and using the keypress and keydown events. When attempting to use the paste event, the keydown event takes priority and cancels the paste event from ever happening.
A related question, but does not solve my issue since I want to keep both the keydown and keypress events keypress and keydown take priority over paste event in Firefox & Safari
My event listeners:
window.addEventListener('paste', pasteText);
window.addEventListener("keypress", keyPressHandler, true);
window.addEventListener("keydown", keyDownHandler, true);
function pasteText (event) {
console.log('paste');
if(selectedLine !== ''){
var clipboardData, pastedData;
event.stopPropagation();
event.preventDefault();
clipboardData = event.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
}
}
function keyPressHandler(event){
if(selectedLine != '' &&
$(".sp-input").is(":focus") === false &&
$("input").is(":focus") === false){
var key = event.keyCode;
if (key == 13){ // Enter key
gotoNextLineOrDeselect();
}else if (key == 115 && (event.ctrlKey||event.metaKey)|| (key == 19)) {
// this will be for modifier keys like ctrl, option and mand
event.preventDefault();
// do stuff
}else if(key !== 8 &&
key !== 9 &&
key !== 37 &&
key !== 38 &&
key !== 39 &&
key !== 40 &&
key !== 46){
key = event.charCode;
addletter(String.fromCharCode(key));
event.preventDefault();
}
}
}
function keyDownHandler(event){
if(selectedLine != '' &&
$(".sp-input").is(":focus") === false){
var key = event.keyCode;
switch(key){
case 8:
backspace();
break;
case 9: // tab
var nextLine;
if(selectedLine === 'line1' && lineBlankOrWhitespace('line2') === false){
nextLine = 'line2';
}else if(selectedLine === 'line2' && lineBlankOrWhitespace('line3') === false){
nextLine = 'line3';
}else if(selectedLine === 'line2' & lineBlankOrWhitespace('line3') ||
selectedLine === 'line3'){
nextLine = 'line1';
}else return;
selectLine(nextLine, false);
textInsertIndex = textLines[selectedLine].keyHistory.length;
setCaretXPosWithTextInsertIndex(selectedLine, 0);
renderScreen();
event.preventDefault();
break;
case 37: // left arrow
arrowOver(-1);
event.preventDefault();
break;
case 39: // right arrow
arrowOver(1);
event.preventDefault();
break;
case 38: // up arrow
var prevLine = selectedLine === 'line3' ? 'line2' : 'line1';
if(selectedLine !== 'line1'){
selectLine(prevLine, false);
textInsertIndex = textLines[selectedLine].keyHistory.length;
}else{
textInsertIndex = 0;
}
setCaretXPosWithTextInsertIndex(selectedLine, 0);
renderScreen();
event.preventDefault();
break;
case 40: // down arrow
var nextLine = selectedLine === 'line1' ? 'line2' : 'line3';
if(lineBlankOrWhitespace(nextLine) === false &&
selectedLine !== 'line3'){
selectLine(nextLine, false);
}
textInsertIndex = textLines[selectedLine].keyHistory.length;
setCaretXPosWithTextInsertIndex(selectedLine, 0);
renderScreen();
event.preventDefault();
break;
case 46: // forward delete key
forwardDelete();
break;
}
}
}
When pasting, is there a way to prevent the keypress and keydown events from being triggered?
Since I'm using canvas to render typed text and need to use other key events like backspace, forward delete, tab and arrow keys, I need patibility between browsers and using the keypress and keydown events. When attempting to use the paste event, the keydown event takes priority and cancels the paste event from ever happening.
A related question, but does not solve my issue since I want to keep both the keydown and keypress events keypress and keydown take priority over paste event in Firefox & Safari
My event listeners:
window.addEventListener('paste', pasteText);
window.addEventListener("keypress", keyPressHandler, true);
window.addEventListener("keydown", keyDownHandler, true);
function pasteText (event) {
console.log('paste');
if(selectedLine !== ''){
var clipboardData, pastedData;
event.stopPropagation();
event.preventDefault();
clipboardData = event.clipboardData || window.clipboardData;
pastedData = clipboardData.getData('Text');
}
}
function keyPressHandler(event){
if(selectedLine != '' &&
$(".sp-input").is(":focus") === false &&
$("input").is(":focus") === false){
var key = event.keyCode;
if (key == 13){ // Enter key
gotoNextLineOrDeselect();
}else if (key == 115 && (event.ctrlKey||event.metaKey)|| (key == 19)) {
// this will be for modifier keys like ctrl, option and mand
event.preventDefault();
// do stuff
}else if(key !== 8 &&
key !== 9 &&
key !== 37 &&
key !== 38 &&
key !== 39 &&
key !== 40 &&
key !== 46){
key = event.charCode;
addletter(String.fromCharCode(key));
event.preventDefault();
}
}
}
function keyDownHandler(event){
if(selectedLine != '' &&
$(".sp-input").is(":focus") === false){
var key = event.keyCode;
switch(key){
case 8:
backspace();
break;
case 9: // tab
var nextLine;
if(selectedLine === 'line1' && lineBlankOrWhitespace('line2') === false){
nextLine = 'line2';
}else if(selectedLine === 'line2' && lineBlankOrWhitespace('line3') === false){
nextLine = 'line3';
}else if(selectedLine === 'line2' & lineBlankOrWhitespace('line3') ||
selectedLine === 'line3'){
nextLine = 'line1';
}else return;
selectLine(nextLine, false);
textInsertIndex = textLines[selectedLine].keyHistory.length;
setCaretXPosWithTextInsertIndex(selectedLine, 0);
renderScreen();
event.preventDefault();
break;
case 37: // left arrow
arrowOver(-1);
event.preventDefault();
break;
case 39: // right arrow
arrowOver(1);
event.preventDefault();
break;
case 38: // up arrow
var prevLine = selectedLine === 'line3' ? 'line2' : 'line1';
if(selectedLine !== 'line1'){
selectLine(prevLine, false);
textInsertIndex = textLines[selectedLine].keyHistory.length;
}else{
textInsertIndex = 0;
}
setCaretXPosWithTextInsertIndex(selectedLine, 0);
renderScreen();
event.preventDefault();
break;
case 40: // down arrow
var nextLine = selectedLine === 'line1' ? 'line2' : 'line3';
if(lineBlankOrWhitespace(nextLine) === false &&
selectedLine !== 'line3'){
selectLine(nextLine, false);
}
textInsertIndex = textLines[selectedLine].keyHistory.length;
setCaretXPosWithTextInsertIndex(selectedLine, 0);
renderScreen();
event.preventDefault();
break;
case 46: // forward delete key
forwardDelete();
break;
}
}
}
When pasting, is there a way to prevent the keypress and keydown events from being triggered?
Share Improve this question edited Aug 23, 2017 at 17:19 Chewie The Chorkie asked Aug 23, 2017 at 17:13 Chewie The ChorkieChewie The Chorkie 5,29610 gold badges53 silver badges98 bronze badges 5- 2 It would help a lot if you'd post the code for your event handlers, as that could very well be where the problem lies. – Pointy Commented Aug 23, 2017 at 17:15
- preventDefault? – epascarello Commented Aug 23, 2017 at 17:15
- Updated with event handlers – Chewie The Chorkie Commented Aug 23, 2017 at 17:19
- Is it still unclear? Want me to include anything else? – Chewie The Chorkie Commented Aug 23, 2017 at 17:39
- espascarello, if preventDefault is the solution, where would I put it? I tried at the beginning of my paste event, but does not do anything: event.preventDefault(); – Chewie The Chorkie Commented Aug 23, 2017 at 18:02
1 Answer
Reset to default 6Here's the answer: I need to preventDefault if it exists. Then I need to check for the modifier keys on the other key events and return false if they are pressed.
function pasteText (event) {
if (event.preventDefault())
event.preventDefault();
console.log('paste');
}
function keyPressHandler(event){
if (event.ctrlKey||event.metaKey) {
return false;
}
}
function keyDownHandler(event){
if (event.ctrlKey||event.metaKey) {
return false;
}
}