js input标签，忽略空格

在事件触发中，当输入框中没有数据或者空格字符串时，如何才能不进行操作呢？或者说，如何才能不允许输入框中数据为空或者有空字符呢？

比如说下面的例子，添加blur事件，然后当输入框失焦，触发事件；然后在没有数据或者数据是空格字符的时候，打印输入框中的内容。

<input type="text" placeholder="内容">
<script>
    var input = document.querySelector("input");
    console.log("初始数据:",input.value,"|---");
    input.addEventListener("blur", handler);
    function handler(e) {
        console.log("现在数据:",input.value,"|---");
    }
</script>

能发现，失焦触发事件，原样打印输入的内容。
但现在我希望当无数据或者空字符数据时直接跳出事件处理函数。怎么进行判断呢？

我想到了去判断输入框中的数据转成的bool值。理想状态下，无数据或者空字符时，Bool(input.value)==false，但是不同情况的状态却是不一样的。

一、先看下 input 的 type 为 text 时：

<input type="text" placeholder="内容">
<script>
    var input = document.querySelector("input");
    input.addEventListener("blur", handler);
    function handler(e) {
        console.log("现在数据:",input.value,"|---");
        console.log("数据的bool:",Boolean(input.value));
    }
</script>

所以，输入的数据为空格字符时，无法通过bool值来排除。

二、当 input 的 type 为 email时：

<input type="email" placeholder="内容">

我们会发现，input的type为email时，不管我们输入了多少个空字符，它都会自动忽略。

三、使用字符串的 trim() 方法：

• trim() 方法用于删除字符串的头尾空格。
• trim() 方法不会改变原始字符串。

把文本框改成text类型的：

<input type="text" placeholder="内容">

然后修改事件处理函数：

function handler(e) {
    input.value=input.value.trim();
    console.log("现在数据:",input.value,"|---");
    console.log("数据的bool:",Boolean(input.value));
}

这样的话，如果输入的全部是空字符串，就可以使用trim方法，将空字符串去掉，判定的bool值会变成false。
然后我们if(!input.value) reutrn;就可以实现在不输入数据或者输入空格时，不进行操作，直接跳出处理函数。

那么结论就是，可以使用 input的email类型 或者 字符串的trim方法 来排除空字符。