经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue中如何去掉input前后的空格
来源:jb51  时间:2023/3/6 9:13:05  对本文有异议

vue去掉input前后的空格

场景:在开发过程中,遇到表单填写,用户可以自由输入

截图举例:

这里,用户瞎输,填了几个空格,导致给后台发请求的时候,也带了好多空格,这种体验特别不好。因此在开发过程中,要考虑去空格的问题。

在vue 2.x中,v-model.trim就可以搞定,截图如下:

但是在vue1.x 中,v-model.trim 不生效,此时就不能这么改了。但是清楚底层原理,去掉字符串前后的空格原理就是v-model 的值,js里面trim方法就可以。

写一个去除input框空格的vue指令

使用方法

使用方法

源码

  1. const handleBlurEvent = (e) => {
  2. e.target.value = e.target.value.trim();
  3. // 触发原生input事件
  4. let event = document.createEvent('HTMLEvents');
  5. event.initEvent('input', true, true);
  6. e.target.dispatchEvent(event);
  7. };
  8.  
  9. const bindInputBlurEvent = (node) => {
  10. if (node.tagName === 'INPUT') {
  11. node.onblur = handleBlurEvent;
  12. } else {
  13. // 递归子节点
  14. Array.from(node.children).forEach((children) => {
  15. bindInputBlurEvent(children);
  16. });
  17. }
  18. };
  19.  
  20. export default {
  21. bind(el) {
  22. bindInputBlurEvent(el);
  23. }
  24. };
  25.  

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号