时间戳

首页 > 解决方案 > 如何防止剪贴板回车变成换行

javascript - 如何防止剪贴板回车变成换行

问题描述

我正在为教育目的编写加密算法，并且我需要能够复制/粘贴 unicode 字符。
问题是剪贴板（不仅是api）将回车符（十六进制：0x0d，十进制：13）修改为换行符（十六进制：0x0a，十进制：10）。
我怎样才能防止这种行为？ 

let $ = s => document.querySelector(s);

let cr = String.fromCharCode(0x0d);

$("#one").addEventListener("click", function (e)
{
	navigator.clipboard.writeText(cr);
});

$("#two").addEventListener("change", function (e)
{
	$("#out").textContent = "0x" + this.value.charCodeAt(0).toString(16).padStart(2, 0);
});
<button id="one">copy cr to clipboard</button><br>
<textarea type="text" id="two"></textarea><br>
<div id="out"></div>

您可以通过单击按钮将回车保存到剪贴板中，然后将其粘贴到 textarea 中来测试它。然后在文本区域外单击以触发更改事件。它将显示 0x0a，因为剪贴板已将 cr 转换为 lf。

PS：我不得不从引导模式转到传统模式，因为它很麻烦，真的很烦人

标签： javascript

解决方案

它与剪贴板无关：

const $ = s => document.querySelector(s);
const cr = String.fromCharCode(0x0d);
const firstCharAsHex = v => "0x" + v.charCodeAt(0).toString(16).padStart(2, 0);

$("#one").addEventListener("click", async function (e) {
  navigator.clipboard.writeText(cr);
  
  const v = await navigator.clipboard.readText();
  console.log("Written: " + firstCharAsHex(v));
});


$("#two").addEventListener("paste", function (e) {
  const v = e.clipboardData.getData('text/plain');
  console.log("Being paste: " + firstCharAsHex(v));
});

$("#two").addEventListener("change", function (e) {
  const v = this.value
  console.log("After paste: " + firstCharAsHex(v));
});
<button id="one">Run</button><br>
<textarea type="text" id="two"></textarea><br>

Textarea 标准化CR为LF. 见规格：

由于历史原因，元素的值以三种不同的方式归一化，用于三种不同的目的。

  • 原始值是最初设置的值。它没有标准化。
  • API 值是用于valueIDL 属性、textLengthIDL 属性以及由maxlength和minlength内容属性使用的值。它被规范化，因此换行符使用 U+000A LINE FEED (LF) characters。
  • 最后，还有value，用于本规范中的表单提交和其他处理模型。它被规范化，因此换行符使用 U+000D CARRIAGE RETURN U+000A LINE FEED (CRLF) 字符对，此外，如果需要，给定元素的wrap属性，插入额外的换行符以将文本换行在给定的宽度。

推荐阅读