解决input输入的是空格问题

<el-input v-model="form.reason" type="textarea" placeholder="请输入理由"/>
this.form.reason.split(' ').join('').length === 0

this.form.reason.split(' ').join('').length === 0的意思是先以空格拆分成数组,再拼接起来,最后判断字符串的长度,如果长度为0证明输入的全是空格

只要有空格都会自动消除,禁止前中后输入空格

<input type="text" class="form-control" id="assetId" onkeyup="this.value=this.value.replace(/[, ]/g,'')"></input>
onkeyup="this.value=this.value.replace(/[, ]/g,'')"

作用:① 在input框里面输入数据的过程中,出现空格,自动消除
           ② input首尾出现空格,自动消除
           ③ 复制粘贴的文本里面出现空格,自动消除

禁止前后输入空格,不禁止中间输入空格

<input type="text" name="test" onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"></input>
onkeyup="this.value=this.value.replace(/^\s+|\s+$/g,'')"
### el-input 组件允许输入空格解决方案 对于 `el-input` 组件,默认情况下可能不允许直接输入多个连续空格或开头结尾的空格。为了实现允许输入空格的功能,可以通过监听输入事件并自定义处理逻辑来保留用户输入的所有字符,包括空格。 #### 方法一:使用原生属性控制 如果只是简单地希望阻止浏览器自动去除首尾空白或其他特殊行为,可以尝试设置 input 的 `trim` 属性为 false 或者不设置该属性[^1]: ```html <template> <el-input v-model="inputValue" :trim="false"></el-input> </template> <script setup> import { ref } from 'vue'; const inputValue = ref(''); </script> ``` 这种方法适用于 Element Plus 版本支持此参数的情况;如果不支持,则需采用其他方式。 #### 方法二:通过 JavaScript 处理粘贴内容 当涉及到复制粘贴操作时,可能会遇到即使设置了 trim=false 也无法完全保持原始字符串的问题。此时可以在 paste 事件中手动拦截并调整粘贴的内容: ```javascript // 在 script 中添加如下代码 methods: { handlePaste(event){ event.preventDefault(); const text = (event.clipboardData || window.clipboardData).getData('text'); document.execCommand("insertText", false, text); } } ``` 同时,在模板里绑定这个方法到对应的事件上: ```html <template> <el-input @paste.native="handlePaste" v-model="inputValue"></el-input> </template> ``` 上述两种方法能够有效地让 `el-input` 支持完整的空格输入功能。需要注意的是具体实现细节会依据所使用的框架版本和个人项目环境有所不同。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值