Vue之input框自动获取焦点+内容形式修改
前言 在项目开发的过程中需要用到input框,限定input框中只能输入数字,当界面一显示的时候input框获得焦点,并调起手机上的数字框。实现方式普通输入框<input type="number" />获取焦点<input v-focus type="number"/>methods中的方法thisFocus(){$('#Inp...
·
前言
在项目开发的过程中需要用到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,'')" />
总结
在项目开发的过程中,万事还是要以用户的需求为主,减少用户的操作,方便用户使用。
更多推荐
已为社区贡献17条内容
所有评论(0)