前言

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

总结

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

Logo

前往低代码交流专区

更多推荐