如何同时检测“enter”键和“shift”键以插入换行符

时间:2021-08-26 10:26:38

I'm trying to create a note system. Whatever you type into the form gets put into a div. When the user hits Enter, they submit the note. However I want to make it so when they hit Shift + Enter it creates a line break a the point where they're typing (like skype). Here's my code:

我正在尝试创建一个笔记系统。无论你在表格中输入什么,都会被放入div中。当用户点击Enter时,他们会提交注释。但是我想要这样做,当他们按Shift + Enter时,它会创建一个换行符,就像他们正在键入的那样(如skype)。这是我的代码:

$('#inputpnote').keypress(function(event){

    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode=='13' && event.shiftKey){
        $("inputpnote").append("<br>");
    }
    else if(keycode == '13'){
        var $pnote = document.getElementById("inputpnote").value;
        if ($pnote.length > 0) {
            $("#pnotes-list").append("<div class='pnote-list'><li>" + $pnote + "</li></div>");
            $('#inputpnote').val('');
        }
    }

});

#inputpnote is the form where the user enters their note and #pnotes-list is the place where the notes are being appended to. Thank you in advance!

#inputpnote是用户输入注释的表单,#pnotes-list是附加注释的位置。先感谢您!

1 个解决方案

#1


2  

I think for this you'd have to set two global variables, 1 for shitftKeyPress and 1 for enterKeyPress and then you'd need a keydown and a keyup to set those values and then you check to see if they are both true, because your logic is saying, when a key is pressed, execute this code, if you press a key and then press another key, the only that will happen is the function will be called twice.

我认为你必须设置两个全局变量,1为shitftKeyPress,1为enterKeyPress,然后你需要一个keydown和一个keyup来设置这些值然后你检查它们是否都是真的,因为你的逻辑说,当按下一个键时,执行这个代码,如果你按一个键然后按另一个键,唯一会发生的是该函数将被调用两次。

EDIT: Example code of what it should look like:

编辑:它应该是什么样子的示例代码:

var hasPressedShift = false;
var hasPressedEnter = false;

$('#inputpnote').keydown(function(event){
    if(shiftkey) {
        hasPressedShift = true;
    }

    if(enterKey) {
        hasPressedEnter = true;
    }
});

$('#inputpnote').keyup(function(event){
    if(shiftkey) {
        hasPressedShift = false;
    }

    if(enterKey) {
        hasPressedEnter = false;
    }
});

$('#inputpnote').keypress(function(event){
    if(hasPressedShift && hasPressedEnter) {
        // Do something
    }
});

This was a quick mock up, but it's similar to how it should look

这是一个快速模拟,但它与它的外观类似

#1


2  

I think for this you'd have to set two global variables, 1 for shitftKeyPress and 1 for enterKeyPress and then you'd need a keydown and a keyup to set those values and then you check to see if they are both true, because your logic is saying, when a key is pressed, execute this code, if you press a key and then press another key, the only that will happen is the function will be called twice.

我认为你必须设置两个全局变量,1为shitftKeyPress,1为enterKeyPress,然后你需要一个keydown和一个keyup来设置这些值然后你检查它们是否都是真的,因为你的逻辑说,当按下一个键时,执行这个代码,如果你按一个键然后按另一个键,唯一会发生的是该函数将被调用两次。

EDIT: Example code of what it should look like:

编辑:它应该是什么样子的示例代码:

var hasPressedShift = false;
var hasPressedEnter = false;

$('#inputpnote').keydown(function(event){
    if(shiftkey) {
        hasPressedShift = true;
    }

    if(enterKey) {
        hasPressedEnter = true;
    }
});

$('#inputpnote').keyup(function(event){
    if(shiftkey) {
        hasPressedShift = false;
    }

    if(enterKey) {
        hasPressedEnter = false;
    }
});

$('#inputpnote').keypress(function(event){
    if(hasPressedShift && hasPressedEnter) {
        // Do something
    }
});

This was a quick mock up, but it's similar to how it should look

这是一个快速模拟,但它与它的外观类似