一、前景在给用户提交表单时用户复制张贴内容容易在输入的内容前后加入一个或多个空格影响数据的存粹导出后的表格数据也会换行。传统的方法是在js或后台控制器中使用trim()方法用于删除字符串或单元格文本两端的多余空格仅保留单词间的单个空格。缺点:需要一个个字段都使用trim方法去除一次太过麻烦且不方便二、解决在HTML前端页面的js中使用以下方法可自动去除页面所有input输入框的前后空格// 1. 获取页面中所有类型为 text 的 input 元素 const inputs document.querySelectorAll(input[typetext]); // 2. 遍历所有获取到的输入框 inputs.forEach(input { // 3. 为每个输入框绑定 blur失去焦点事件 input.addEventListener(blur, function() { // 4. 去除输入框值的首尾空格 this.value this.value.replace(/^\s|\s$/g, ); }); });三、代码解释这段 JavaScript 代码的作用是给页面中所有文本输入框添加失去焦点时自动去除首尾空格的功能。使用 CSS 选择器找到页面上所有input typetext元素返回一个NodeList类数组对象包含所有匹配的输入框。对每个输入框单独绑定事件blurblur 事件当用户点击输入框之外的区域比如点击其他地方、按下 Tab 键切换焦点时触发触发时机用户输入完成后离开输入框时自动执行正则表达式正则表达式^匹配字符串的开头\s匹配一个或多个空白字符空格、制表符、换行符等\s匹配一个或多个空白字符$匹配字符串的结尾g全局匹配找到所有匹配项作用这是一段测试文本→ 替换后变成这是一段测试文本\n 测试\t→ 替换后变成测试输入内容用户输入失去焦点后自动变成1234512345hello worldhello world全空格空字符串a b ca b c中间空格保留