如何检测“shift+enter”并在Textarea中生成新行?

IT技术 javascript jquery html css
2021-01-31 18:30:56

目前,如果人enter在文本区域内按下,则表单将提交。
很好,我想要那个。

但是当他们输入shift+ 时enter,我希望 textarea 移动到下一行:\n

我怎样才能在JQueryJavaScript或纯 JavaScript 中尽可能简单地做到这一点?

6个回答

简单优雅的解决方案:

首先,Enter在 textarea 内按下不会提交表单,除非您有脚本来做到这一点。这是用户期望的行为,我建议不要更改它。但是,如果您必须这样做,最简单的方法是找到Enter提交表单的脚本并进行更改。代码会有类似的东西

if (evt.keyCode == 13) {
    form.submit();
}

...你可以把它改成

if (evt.keyCode == 13 && !evt.shiftKey) {
    form.submit();
}

另一方面,如果由于某种原因您无法访问此代码,则即使插入符号不在文本末尾,您也需要执行以下操作以使其在所有主要浏览器中都能正常工作:

jsFiddle:http : //jsfiddle.net/zd3gA/1/

代码:

function pasteIntoInput(el, text) {
    el.focus();
    if (typeof el.selectionStart == "number"
            && typeof el.selectionEnd == "number") {
        var val = el.value;
        var selStart = el.selectionStart;
        el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);
        el.selectionEnd = el.selectionStart = selStart + text.length;
    } else if (typeof document.selection != "undefined") {
        var textRange = document.selection.createRange();
        textRange.text = text;
        textRange.collapse(false);
        textRange.select();
    }
}

function handleEnter(evt) {
    if (evt.keyCode == 13 && evt.shiftKey) {
        if (evt.type == "keypress") {
            pasteIntoInput(this, "\n");
        }
        evt.preventDefault();
    }
}

// Handle both keydown and keypress for Opera, which only allows default
// key action to be suppressed in keypress
$("#your_textarea_id").keydown(handleEnter).keypress(handleEnter);

更好地使用更简单的解决方案:

下面蒂姆的解决方案更好,我建议使用它:https : //stackoverflow.com/a/6015906/4031815


我的解决方案

我认为你可以做这样的事情..

编辑:无论插入符号的位置如何,都将代码更改为工作

代码的第一部分是获取插入符号位置。

参考:如何从一开始就以字符形式获取文本区域中插入符号列(不是像素)的位置?

function getCaret(el) { 
    if (el.selectionStart) { 
        return el.selectionStart; 
    } else if (document.selection) { 
        el.focus();
        var r = document.selection.createRange(); 
        if (r == null) { 
            return 0;
        }
        var re = el.createTextRange(), rc = re.duplicate();
        re.moveToBookmark(r.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
    }  
    return 0; 
}

然后在Shift+ Entertogether时相应地替换 textarea 值,如果Enter单独按下则提交表单

$('textarea').keyup(function (event) {
    if (event.keyCode == 13) {
        var content = this.value;  
        var caret = getCaret(this);          
        if(event.shiftKey){
            this.value = content.substring(0, caret - 1) + "\n" + content.substring(caret, content.length);
            event.stopPropagation();
        } else {
            this.value = content.substring(0, caret - 1) + content.substring(caret, content.length);
            $('form').submit();
        }
    }
});

这是一个演示

此外,还有一个错字(您的意思是event.keyCode == 13),我认为您可能还想要event.preventDefault()而不是event.stopPropagation().
2021-03-13 18:30:56
如果插入符号不在 textarea 内容的末尾,那将不起作用。
2021-03-20 18:30:56
虽然它工作正常,但它给出了carent未定义的错误,如果我将其更改为插入符号,则会添加 2 行新行
2021-03-21 18:30:56
我改变了它。现在不管插入符号的位置如何,它都可以工作。event.stopPropagation()我停下来的意思,他可能已经写入提交表单一些其他的代码。
2021-03-29 18:30:56
插入符号位置功能有缺陷(请参阅我对链接插入符号位置问题的评论和回答),无论如何您都不需要插入符号位置来执行此操作。在这里看到我的答案。Re event.stopPropagation(),这将阻止事件在 DOM 上进一步冒泡,但不会阻止按键执行插入换行符的默认操作(尽管实际上keyup我的建议event.preventDefault()也不会这样做)。
2021-04-01 18:30:56

这些答案中的大多数都使问题变得过于复杂。为什么不试试这种方式呢?

$("textarea").keypress(function(event) {
        if (event.keyCode == 13 && !event.shiftKey) {
         submitForm(); //Submit your form here
         return false;
         }
});

没有乱七八糟的插入符号位置或推线中断到 JS。基本上,如果按下 shift 键,该功能将不会运行,因此允许输入/返回键执行其正常功能。

这正是我想要的。谢谢。
2021-03-24 18:30:56

为什么不只是

$(".commentArea").keypress(function(e) {
    var textVal = $(this).val();
    if(e.which == 13 && e.shiftKey) {

    }
    else if (e.which == 13) {
       e.preventDefault(); //Stops enter from creating a new line
       this.form.submit(); //or ajax submit
    }
});
你是“停止从创建新行进入”的人:)
2021-03-25 18:30:56
您可以只使用一种条件,例如 (event.keyCode == 13 && !event.shiftKey)。只是一个提示:如果你使用knockoutjs,你需要先取消textarea的焦点来更新值:jQuery(this).blur();
2021-03-29 18:30:56

如果有人在使用 AngularJS 时遇到同样的问题,这里是一个使用ng-keyup的 AngularJS 解决方案

ng-keyup="$event.keyCode == 13 && !$event.shiftKey && myFunc()"