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

时间:2011-11-18 18:47:31

标签: javascript jquery html

我有以下简单的<textarea>

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

此外,我还有以下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');
    }
});

我正试图强制不在正常的返回keydown上创建新的换行符。但是如果输入了Ctrl + Enter,我想要这种行为。

这确实检测到了差异,但没有强制我需要的行为。 如果您使用过Windows Live Messenger,我需要相同的文本框行为。输入提交(在我的情况下,我将调用一个函数,但停止textarea向下一行)并按Ctrl + Enter进入一行。

解决方案?感谢。

更新

$('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();
    }
});

以上做了我想做的事。只有部分模拟输入按下换行符。如果你知道的话,请告诉我怎么做。

3 个答案:

答案 0 :(得分:10)

使用keypress代替keydown可以更好一些,但无法使用 Ctrl 键;我切换到 shift 键 - jsfiddle

编辑:据我所知,你将不能一直使用Ctrl键跨浏览器,因为浏览器使用它来进行自己的快捷方式。您将使用alt键遇到相同的情况。

再次编辑:我的解决方案适用于 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;  
    } 
});

编辑:这不起作用100%,只有当你不在文本中间时它才有效。必须努力使代码在中间处理文本。

顺便说一句...... 你为什么这样做?如果他们按下输入来创建一个新行并且表单在它们准备好之前突然提交,那么用户不会感到困惑吗?

答案 1 :(得分:2)

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

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

Ctrl+Enter jQuery in TEXTAREA

答案 2 :(得分:2)

清除VanillaJS

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