JS实现文本编辑器回车插入<br>到第二个文本框且首框不显示该标签的方法问询

结论 #

原生 <textarea> 是纯文本输入控件，无法实现“内容包含<br>标签但不展示给用户”的效果，它会原样渲染所有输入的文本内容，没有原生的隐藏内容特性。你可以调整实现逻辑，用更简单的方式达到需求：

实现方案 #

不需要往用户使用的第一个文本框插入<br>标签，按以下逻辑调整即可：

1. 第一个文本框保留给用户正常输入，按回车时使用默认的\n换行符，用户看到的就是正常的换行效果，没有多余标签
2. 内容同步到第二个文本框时，统一把所有\n换行符替换为<br>，第二个框里的内容就是符合存储要求的带标签格式

调整后的代码 #

HTML部分（和原有逻辑一致）

<textarea type="text" id="first"></textarea>
<textarea type="text" id="second"></textarea>

JS部分

$(function (){
    // 用input事件覆盖所有输入场景（键盘输入、粘贴、拖拽输入等），比keyup兼容性更强
    $('#first').on('input', function(){
        // 取第一个框的原始内容，把所有换行符批量替换为<br>
        const formattedContent = $(this).val().replace(/\n/g, '<br>');
        // 赋值给第二个用于提交的文本框
        $('#second').val(formattedContent);
    });
});

扩展提示 #

如果后续要实现更多富文本编辑功能（比如加粗、插入链接等），可以把第一个输入框替换为设置了contenteditable="true"的普通div，这类元素支持内嵌HTML标签，用户只会看到渲染后的格式效果，不会展示标签源码，更适合文本编辑器场景。

内容的提问来源于stack exchange，提问作者Konoha