Vue之input框自动获取焦点+内容形式修改

前言

  在项目开发的过程中需要用到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,'')" />

总结

  在项目开发的过程中，万事还是要以用户的需求为主，减少用户的操作，方便用户使用。