jQuery：按 Enter 时在光标位置添加换行符

Posted 2023-05-07

【中文标题】jQuery：按 Enter 时在光标位置添加换行符

【英文标题】：jQuery: add line break at cursor position when hitting Enter

【发布时间】：2014-04-30 18:37:06

【问题描述】：

我有一个带有文本区域 (id = details) 的表单。

有没有一种方法可以在此文本区域中按 Enter 键时在光标位置插入换行符 (<br />) 的 html 代码？

我只需要这个就可以在 IE 中工作。

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

【问题讨论】：

你为什么需要它？输入已经为你做到了:)

上面开个玩笑，看看我的回答

【参考方案1】：

试试这个：

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

你可以试试fiddle with it here

编辑：我意识到这只是在最后添加一个<br />，经过更多研究，我找到了这个解决方案：

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

这是一个fiddle for this one

来源（大部分）：Insert text into textarea with jQuery

再次编辑： 看起来 OP 希望最后的文本也被清除，所以我相应地更新了我的代码（其他人看到这个：查看 the first edit of my relevant fiddle 以了解您的情况d 想保留剩余的文本）。

【讨论】：

谢谢，这总是将它插入到内容的末尾而不是光标位置，对吧？

谢谢，这确实在正确的位置输入了 HTML 代码，但之后再次复制了我的初始内容。

它仍然会在换行后再次复制我的初始内容。没有它会很好，但这样它最终总是看起来像这样：myTextmyText - 然后我总是必须从字符串末尾删除我的文本副本。

你想要什么？？解释得更好

尝试删除最后一个 (,this.value.length) .. 它是可选的，它可能是重复的来源

【参考方案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 />");

来源：so - here

【讨论】：

当我尝试这个时，我得到 caretPos 是未定义的。我将上述内容复制到我的函数文件中，并通过单击按钮启动它。还有什么我需要在这里做的吗？

我编辑了代码，请修改它..希望它能工作

谢谢，不幸的是这没有任何作用。当我单击按钮时，它可能会丢失插入符号的位置？

您的主要编辑是我首先尝试的，但 OP 希望 <br> 标签出现在光标位置...我相信至少，因为他们在询问问题，另外还希望删除其余文本（我猜光标位置之后的内容）...

没有我的主要编辑将替换任何 \n 而您的第一次试用是关于在末尾附加尾随 ;)..无论如何我正在等待他的回复说天气是否有效:)

【参考方案3】：

是的，当然。似乎是这样，您需要 keydown 事件处理，并且可能需要 setTimeout 0 hack，请看这里：Why is setTimeout(fn, 0) sometimes useful?