如何在 HTML 输入文本字段中输入换行符？

Question

我有一个 HTML 表单，其中包含 10 个文本类型的输入字段。我希望用户能够将 10 行的文本复制并粘贴到第一个输入字段中，然后自动将它们放入 Javascript 的 10 个字段中。但换行符似乎立即被删除，至少 Firefox 是这样。因此，当我使用 Javascript 获取第一个字段的值时，它不再有换行符。

有没有办法获取带有换行符的文本？我不能使用文本区域，因为这会导致其他问题。

Answer 1

好吧，这很奇怪。但你可以试试这个：

首先，html，你有这样的文本字段

<input classname="pastingBoxes" /> 
<input classname="pastingBoxes" />
<input classname="pastingBoxes" />
...

然后是JS

// first you get an array with all the inputs
let textfields = document.getElementsByClassName('pastingBoxes');

// so you assign input 0 a listener for the onpaste event
textfields[0].onpaste = function(event){
   event.preventDefault();
   // this will split the data on newline, so you get a value per line
   let allValues = event.clipboardData.getData('Text').split(/\r?\n/)

   // then cycle trough it to assign the values:
   for(var i = 0; i < allValues.length; i++){
      textfields[i].value = allValues[i];
   }
};

好了！希望这可以帮助。

如何在 HTML 输入文本字段中输入换行符？

How to get line breaks entered into a HTML input text field?

html

javascript

textfield