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

标签 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');
    }
});

我试图强制不在正常的回车键按下时创建新的换行符。但如果改为键入 Ctrl+Enter,我想要这种行为。

这确实可以检测到差异,但不会强制执行我需要的行为。 如果您使用过 Windows Live Messenger,我需要相同的文本框行为。 Enter 提交(在我的例子中,我将调用一个函数,但阻止 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();
    }
});

以上就是我想做的。只有用换行符模拟回车键的部分。如果您知道,请告诉我如何执行此操作。

最佳答案

使用 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% 有效,只有当您不在文本中间时才有效。必须想办法让代码在中间处理文本。

顺便说一下...... 你为什么要这样做?如果用户按 enter 换行并且在他们准备好之前突然提交表单,这不会让用户感到困惑吗?

关于javascript - textarea 控件 - 自定义行为 enter/ctrl+enter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8187512/

相关文章:

javascript - 构造函数与原型(prototype)中的函数

javascript - 让 IE 将正则表达式替换为文字字符串 "$0"

javascript - 在 List.js 中添加图片 src 和 <a> href

javascript - 使用 jQuery 单击多个复选框

javascript - 如何在文档准备就绪时使用ajax加载图像

php - 我应该使用 XMLHttpRequest/JSON 还是 iFrame?

html - CSS FlexBox - 具有不同高度的子元素?

javascript - 调整大小时自动调整字体大小

javascript - 在没有 iframe ID 的情况下从表 td 类访问 iframe

javascript - 尝试取消绑定(bind)点击事件并附加新事件