javascript textarea 控件 - 自定义行为 enter/ctrl+enter

textarea control - custom behavior enter/ctrl+enter

提问by user1027620

I have the following simple <textarea>

我有以下简单的 <textarea>

<textarea id="streamWriter" rows="1" cols="20" placeholder="Writer"></textarea>

Also I have the following jQuery/JavaScript code block:

我还有以下 jQuery/JavaScript 代码块：

$('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.

我试图强制不要在正常返回键下创建新的换行符。但如果 Ctrl+Enter 被输入，我想要这种行为。

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.

这确实检测到差异，但并没有强迫我需要的行为。如果您使用过 Windows Live Messenger，我需要相同的文本框行为。Enter 提交（在我的情况下，我将调用一个函数，但阻止 textarea 下一行）和 Ctrl+Enter 下一行。

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.

以上做了我正在尝试做的事情。只有部分可以模拟带有换行符的 enter press。如果你知道，请告诉我如何做到这一点。

回答by Kevin B

Using keypressinstead of keydownworks a little better, however will not work with the Ctrlkey; I switched to the shiftkey - jsfiddle.

使用keypress而不是keydown效果会好一点，但不会与Ctrl键一起工作；我切换到shift关键 - 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.

编辑：据我所知，您将无法跨浏览器始终如一地使用 Ctrl 键，因为浏览器将其用于自己的快捷方式。您会遇到与 alt 键相同的情况。

Edit again: I have a solution that works with the Ctrlkey - jsfiddle.

再次编辑：我有一个适用于Ctrl密钥的解决方案- 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.

编辑：这不是 100% 有效，只有当您不在文本中间时才有效。必须想办法让代码在中间的文本上工作。

By the way...Why are you doing it this way? Wouldn't it be confusing to the user if they pressed enterto make a new line and the form all of a sudden submitted before they were ready?

顺便说一句……你为什么要这样做？如果用户按下enter新行并在他们准备好之前突然提交表单，这会不会让用户感到困惑？

回答by Atombit

Clear VanillaJS:

清除VanillaJS：

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

回答by bongya

Kevin B's solution works well on Mac, but not on windows.

Kevin B 的解决方案适用于 Mac，但不适用于 Windows。

On windows, when ctrl+enteris pressed, the keyCode is 10 not 13.

在 Windows 上，当按下ctrl+时enter，keyCode 是 10 而不是 13。

Ctrl+Enter jQuery in TEXTAREA

在文本区域中 Ctrl+Enter jQuery