Textarea ctrl+enter实现换行,用enter实现表单提交

本文介绍了一种使用jQuery监听键盘事件的方法,通过监听Enter和Ctrl+Enter键实现文本框内的换行与表单提交功能。具体实现包括对不同浏览器的兼容处理,确保在多种环境下都能正常工作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


1. 实现换行的想法是,监听Enter按键, 找到光标当前所在位置,在当前位置上插入一个“\r\n”,

2. 实现提交:监听Ctrl + enter键,找到父级form,提交Form


 $('#inputmessage').keypress(function (ev) {

// 监听按键
        var keycode = (ev.keyCode ? ev.keyCode : ev.which);
        if (ev.ctrlKey && (keycode == 13 || keycode == 10)) {
            insertNewlineToChat($(this));
        }
        else if (!ev.ctrlKey && (keycode == 13 || keycode == 10)) {
            $(this).closest("form").submit();
            return false;
        }

        return true;
    });


function insertNewlineToChat(element) {
    var myValue = "\r\n";
    var $t = $(element)[0];
    if (document.selection) {
        $t.focus();
        var sel = document.selection.createRange();
        sel.text = myValue;
        $t.focus();
        sel.moveStart('character', -l);
    } else if ($t.selectionStart || $t.selectionStart == '0') {
        var startPos = $t.selectionStart;
        var endPos = $t.selectionEnd;
        var scrollTop = $t.scrollTop;
        $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
        $t.focus();
        $t.selectionStart = startPos + 1;   
        $t.selectionEnd = startPos + 1;
        $t.scrollTop = scrollTop;
    } else {
        $t.value += myValue;
        $t.focus();
    }
}


insertNewlineToChat函数参考了 水墨寒 的文本框插入表情控件:  http://www.jq-school.com/Detail.aspx?id=153


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值