你能制作一个不会自动编辑你的文本的文本区域吗？答案

【问题标题】：Can you make a textarea which doesn't automatically edit your text?你能制作一个不会自动编辑你的文本的文本区域吗？
【发布时间】：2016-11-08 09:03:28
【问题描述】：

我正在编写一个脚本，该脚本从文件中获取文本并在末尾添加/编辑校验和（使用像 notepad++ 这样的文本编辑器来访问/从硬盘驱动器）。

当您复制/粘贴到浏览器文本区域时，浏览器文本区域会将\n 和\r\n 转换为\n，然后在转到另一个程序时转换为\n 或\r\n（取决于哪个操作系统你在）。这会使校验和不正确（即使您忽略校验和本身中任何不可打印字符的修饰）。

我想我可以通过打开/保存文件对话框绕过这个（只要这里没有任何类似的惊喜），但还有其他项目这也很有用。

【问题讨论】：

校验和是在什么时候创建的？您是否有机会通过拦截浏览器中的粘贴事件将所有\n 实例标准化为\r\n？
有没有办法用 javascript 将您自己的文本版本放入剪贴板？我认为它需要 Flash 或特殊插件才能直接与剪贴板交互。

标签： javascript html

【解决方案1】：

~~您可以尝试使用带有contenteditable="true" 属性的<pre> 元素而不是textarea。理论上这应该保留输入。~~

编辑我

您可以拦截onpaste 事件并将\r\n 的所有实例标准化为\n，然后生成校验和。 JavaScript 可能如下所示：

var input_el = document.querySelector('.your-textarea');

input_el.onpaste = function(e){
  typeof e !== 'undefined' && e.preventDefault();      

  var clipbd_data;
  
  // handle IE edge case
  if (window.clipboardData && window.clipboardData.getData) {
    clipbd_data = window.clipboardData.getData('Text').replace(/\r\n/g, "\n").replace(/^(.*)\n*$/gm, "$1");
  }
  else if (e.clipboardData && e.clipboardData.getData) {
    clipbd_data = e.clipboardData.getData('text/plain').replace(/\r\n/g, "\n").replace(/^(.*)\n*$/gm, "$1");
  }
  else {
    return; // functionality not supported
  }

  input_el.value = clipbd_data;

  return false;

};

注意：我没有测试过这个。

Source for regex

编辑二

拦截复制事件

首先，将以下onclick 处理程序添加到文本区域：

<textarea class="your-textarea" onfocus="this.select()" onclick="this.focus();this.select()">
</textarea>
<!-- could optionally add ontouchstart="this.select()" for phones, if you need to -->

这很重要，因为我们正在拦截copy 事件——我们不能抓取用户复制的确切数据，因为他们还没有复制它，所以我们需要强制用户选择textarea 中的所有文本都会自动传递，因此我们可以将 textarea 的全部内容传递到剪贴板（标准化后）。无论如何，这应该是用户想要做的，所以它不应该出现可用性问题......

现在，截取副本并添加您自己的文本：

var txt_area = document.querySelector('.your-textarea');

txt_area.addEventListener('copy', function(e){
  // stop the normal copy behaviour
  typeof e !== 'undefined' && e.preventDefault();
  
  // get the contents of the textarea
  var txt_before = txt_area.value;
  
  // normalise
  var txt_after = txt_before.replace(/\r\n/g, "\n").replace(/^(.*)\n*$/gm, "$1");

  e.clipboardData.setData('text/plain', txt_after);
});

【讨论】：

我不知道你可以让

 可编辑！不幸的是，它在粘贴到文本编辑器（ubuntu、firefox）时会将 '\r' 转换为 '\n'，即使它在从文本编辑器粘贴到浏览器时仅显示为一个换行符。

我也希望有滚动条，尽管这不是绝对必要的
混蛋。抱歉浪费您的时间，我没有时间测试这个想法。我有另一个想法，我会在一个小时左右的时间与大家分享。
任何导致学习新事物的事情都不是浪费时间:)
@DustinSoodak 好的，我已经修改了我的答案。可能需要刷新浏览器，因为 StackOverflow 对浏览器缓存的利用过于热情。

【解决方案2】：

看起来这可能是不可能的，所以我发布了另一个问题，关于使用不同的方法将数据从 javascript 获取到文件而不被损坏。见“Keep javascript blob from editing data when saving file”

【讨论】：