使用 JavaScript 从所有输入字段中修剪空白

问题描述

在 IE 中寻找纯 JavaScript 专门用于从所有输入（文本和文本区域）中删除所有额外的空格。

这是有效的 jQuery 版本，但我想要它在 JavaScript 中：

function TrimText(el) {
 el.value = el.value.
 replace(/(^\s*)|(\s*$)/gi,""). // removes leading and trailing spaces
 replace(/[ ]{2,}/gi," "). // replaces multiple spaces with one space
 replace(/\n +/,"\n"); // removes spaces after newlines
 return;
}

将其转换为 JavaScript 的最佳方法是什么？

$j(function () {
 $j("textarea").change(function () {
    TrimText(this);
 });

 $j("input").change(function () {
    TrimText(this);
 });
});

解决方法

如果您想将此应用于当前页面中的所有输入：

document.querySelectorAll('input,textarea').forEach(function(el) {
  el.addEventListener('change',function(ev) { TrimText(ev.target); });
});

如果要将其应用于当前页面中的所有输入以及将来创建的所有输入：

document.addEventListener('change',function (ev) {
  if(ev.target.tagName === 'INPUT' || ev.target.tagName === 'TEXTAREA')
    TrimText(ev.target);
});

这是通过使用一种称为冒泡的机制来实现的。 Javascript 中的事件在 DOM 中冒泡，最终到达 {​​{1}} 元素。因此，我们侦听 document 元素中的事件并按目标的标签名称过滤事件。

这就是 JQuery 内部的工作方式，这种方法也适用于您可以在 JQuery 中做的其他事情。

,

如您所问，这是一种简单的 JavaScript 方式。这将删除所有额外的空格，包括前导空格和尾随空格，并保留单个空格。

工作演示：

function removeWhiteSpaces(){
    var value = document.getElementById("text").value;
    document.getElementById("text").value = value.replace(/\s+/g,' ').trim();
}

<input type="text" id="text" value="  I am  a bad    text"/>
<button onclick="removeWhiteSpaces()">Remove White Spaces</button>