Vue之input框自动获取焦点+内容形式修改 布满荆棘的人生 2024-04-19 10:42 25阅读 0赞 # 前言 # 在项目开发的过程中需要用到input框，限定input框中只能输入数字，当界面一显示的时候input框获得焦点，并调起手机上的数字框。 # 实现方式 # ## 普通输入框 ## <input type="number" /> ## 获取焦点 ## <input v-focus type="number" /> ## methods中的方法 ## thisFocus(){ $('#Input').focus(); } ## 与methods平级的方法 ## directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } 由此，就可以实现界面一进入input框就获得焦点了。那假设我现在有一个变量，其内容为“4,000.00”，我想当我单击某一按钮的时候，把这个变量的值赋给input框，给如何实现呢？ this.money = this.maxMoney.replace(/,/g,'') 因为input是一个number类型的，但是4,000.00不是一个number，所以需要把，去掉。 ## 只允许输入数字 ## 按照上述代码，虽然是number类型的，但是一些特殊字符还是可以输进去，所以需要禁止特殊字符的输入，只能输入数字。 <input type="tel" pattern="[0-9]*" oninput = "value=value.replace(/[^\d]/g,'')" /> # 总结 # 在项目开发的过程中，万事还是要以用户的需求为主，减少用户的操作，方便用户使用。
还没有评论，来说两句吧...