jQuery：按Enter键时在光标位置插入换行符

Question

jQuery：按Enter键时在光标位置插入换行符

javascriptjqueryhtmltextareacursor-position

6

我有一个带有的表单。

是否有一种方式，当在此文本区域内按Enter键时，在光标位置插入换行符（
）的HTML代码？

我只需要这个在IE中能够正常工作。

<textarea class="input height120 elastic span12" name="details" id="details" onkeyup="countCharLimit(event)" onpaste="countCharLimit(event)"></textarea>

- user2571510

为什么你需要那个？Enter键已经为你完成了 :) - benomatis

我刚才开玩笑了，看看我的答案。 - benomatis

3个回答

2

首先你需要找到插入符的位置，如下所示：

    var caretPos = function() {
        var el = $("#details").get(0);
        var pos = 0;
        if('selectionStart' in el) {
            pos = el.selectionStart;
        } else if('selection' in document) {
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength;
        }
        return pos;
    }

从这里获取：here 然后你需要执行以下操作：

var textofDetails = $("#details").val();
jQuery("#detail").val(textofDetails.substring(0, caretPos) + "<br/>" + textofDetails.substring(caretPos) );

主要编辑：

不需要上面的所有内容；你的功能将是：

function replaceNewLine(){

    jQuery("#detail").val().replace(/\\n/g, "<br />");
}

source: so - here

- stackunderflow

当我尝试这个时，我得到了“caretPos未定义”的错误。我将上述内容复制到我的函数文件中，并通过单击按钮来启动它。这里还需要做些什么吗？ - user2571510

我修改了代码，请检查一下..希望它能正常工作。 - stackunderflow

谢谢，不幸的是这并没有做任何事情。也许当我点击按钮时它会丢失插入符位置？ - user2571510

你的主要修改是我尝试的第一个，但是OP希望<br>标记出现在光标位置... 我认为至少是这样，因为他们在提问时不是很明确，此外还希望删除光标位置后面的文本... - benomatis

不，我的主要修改将替换任何 \n，而你的第一次尝试是在末尾添加尾随的 <br>；无论如何，我正在等待他的回复，以便说出它是否起作用了 :) - stackunderflow

0

没问题。看起来你需要处理键盘按下事件，可能需要使用setTimeout 0技巧，可以参考这里：setTimeout(fn, 0)有什么用处？

- brutallord

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- benomatis · Accepted Answer

试试这个：

$('textarea').keypress(function (e){
    if(e.keyCode == 13){
        $('textarea').val($('textarea').val()+"<br />");
    }
});

你可以尝试在这里调试：http://jsfiddle.net/22GLG/1/ 编辑：我发现这只会在结尾添加<br />，经过进一步研究，我找到了这个解决方案：

$('textarea').keypress(function (e){
    if(e.keyCode == 13){
        e.preventDefault();
        this.value = this.value.substring(0, this.selectionStart)+"<br />"+"\n";
    }
});

这里有一个相关的 fiddle 链接

参考来源: 使用jQuery向文本域中插入文本

再次编辑: 看起来 OP 想要在文本末尾也清空文本，所以我相应地更新了我的代码（其他人看到这个：查看我相关 fiddle 的第一次编辑，以了解你想要保留剩余文本的情况）。