如何实现两个multiline textbox数值相乘并将结果输出到第三个multiline textbox

实现核心思路：

• 分别读取两个输入用多行文本框的内容，按换行符\n分割为数组
• 遍历数组逐行处理：首先过滤空行，同时校验每行内容是否为合法数值，非合法数值可根据需求配置为按0计算或抛出输入错误提示
• 逐行计算两个数组对应位置数值的乘积，若两个输入的行数不一致，较短的数组超出部分默认按0计算
• 将所有乘积结果用换行符拼接后，写入结果展示用的多行文本框

以下是原生HTML+JS的通用实现示例：

<!-- 页面结构 -->
<label>乘数输入1：</label>
<textarea id="input1" rows="5" cols="30" placeholder="每行输入一个数值"></textarea>
<br><br>
<label>乘数输入2：</label>
<textarea id="input2" rows="5" cols="30" placeholder="每行输入一个数值"></textarea>
<br><br>
<button onclick="calculateMultiply()">执行计算</button>
<br><br>
<label>计算结果：</label>
<textarea id="result" rows="5" cols="30" readonly></textarea>

<script>
function calculateMultiply() {
  // 读取两个输入框内容，按换行分割为数组并去除首尾空格
  const arr1 = document.getElementById('input1').value.split('\n').map(item => item.trim())
  const arr2 = document.getElementById('input2').value.split('\n').map(item => item.trim())
  const maxLength = Math.max(arr1.length, arr2.length)
  const resultArr = []

  for (let i = 0; i < maxLength; i++) {
    // 转换为数值，非合法数值默认按0处理
    const num1 = isNaN(Number(arr1[i])) ? 0 : Number(arr1[i])
    const num2 = isNaN(Number(arr2[i])) ? 0 : Number(arr2[i])
    resultArr.push(num1 * num2)
  }

  // 结果拼接换行后写入输出文本框
  document.getElementById('result').value = resultArr.join('\n')
}
</script>

其他场景适配说明：

• 若使用Vue/React等前端框架，只需把输入框内容绑定到响应式变量，计算逻辑和上述JS逻辑完全一致即可
• 若为WinForm/WPF等桌面端场景，只需通过控件Text属性获取输入内容，分割计算后再赋值给结果控件的Text属性即可
• 若需要保留指定小数位数、支持科学计数法输入、输入非法时弹出提示等额外需求，可在逐行处理的逻辑中自行扩展

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