js input标签，忽略空格

╰+攻爆jí腚メ 2023-02-27 08:29 1阅读 0赞

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

比如说下面的例子，添加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>

![在这里插入图片描述][20200716225604748.png]  
能发现，失焦触发事件，原样打印输入的内容。  
但现在我希望当无数据或者空字符数据时直接跳出事件处理函数。怎么进行判断呢？

我想到了**去判断输入框中的数据转成的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>

![在这里插入图片描述][20200716232016374.png]  
所以，输入的数据为空格字符时，无法通过bool值来排除。

二、当 input 的 type 为 email时：

![在这里插入图片描述][20200716232359892.png]  
我们会发现，input的type为email时，不管我们输入了多少个空字符，它都会自动忽略。

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

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

把文本框改成text类型的：

然后修改事件处理函数：

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

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

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

[20200716225604748.png]: https://img-blog.csdnimg.cn/20200716225604748.png
[20200716232016374.png]: https://img-blog.csdnimg.cn/20200716232016374.png
[20200716232359892.png]: https://img-blog.csdnimg.cn/20200716232359892.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200717004506676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70