如何阻止HTML的textarea移除回车( )字符？

当通过代码为HTML的textarea设置包含\r\n的字符串时，浏览器会自动将回车符\r替换为换行符\n，示例如下：

// 原生JS示例
document.getElementById('id').value = '<UNICODE-WIN>\r\n<Version:12.1>';
document.getElementById('id').value; // 输出: '<UNICODE-WIN>\n<Version:12.1>'

// jQuery示例
$("#id").prop('value', '<UNICODE-WIN>\r\n<Version:12.1>');
$("#id").val(); // 输出: '<UNICODE-WIN>\n<Version:12.1>'

$("#id").val('<UNICODE-WIN>\r\n<Version:12.1>');
$("#id").val(); // 输出: '<UNICODE-WIN>\n<Version:12.1>'

原因分析 #

这是浏览器遵循HTML规范的默认行为：HTML标准规定，textarea的value属性会自动将CR（\r）或CRLF（\r\n）统一转换为LF（\n），目的是统一跨平台的换行格式，无法直接关闭这个自动替换机制。

可行解决方案 #

虽然无法关闭浏览器的自动替换，但可以通过以下方式保留原始的\r\n格式：

1. 使用自定义属性存储原始内容

利用自定义属性保存包含\r\n的完整字符串，需要使用时直接读取该属性而非value：

// jQuery写法
$("#id").prop('rawContent', '<UNICODE-WIN>\r\n<Version:12.1>');
$("#id").prop('rawContent'); // 输出: '<UNICODE-WIN>\r\n<Version:12.1>'

// 原生JS写法
const textarea = document.getElementById('id');
textarea.rawContent = '<UNICODE-WIN>\r\n<Version:12.1>';
console.log(textarea.rawContent); // 输出: '<UNICODE-WIN>\r\n<Version:12.1>'

2. 读取value时手动还原\r\n

如果必须依赖textarea的value属性，可在读取时将所有\n替换回\r\n（注意：此方法仅适用于原始内容中所有换行均为\r\n的场景，若存在单独的\n会被误转换）：

$("#id").val('<UNICODE-WIN>\r\n<Version:12.1>');
const restoredText = $("#id").val().replace(/\n/g, '\r\n');
console.log(restoredText); // 输出: '<UNICODE-WIN>\r\n<Version:12.1>'

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