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

news/2024/7/10 2:07:48 标签: Vue, input自动获得焦点, number

前言

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

总结

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


http://www.niftyadmin.cn/n/1659549.html

相关文章

Vue获取手机设备信息

前言 在移动端项目的开发中&#xff0c;我们需要根据不同的设备来识别不同的用户&#xff0c;那么使用Vue进行项目开发&#xff0c;如何获取对应的手机设备信息呢&#xff1f; Navigator对象 Navigator对象包含有关浏览器的信息&#xff0c;本文获取的设备信息基本上是基于该对…

Javascript基础——深入了解Javascript(函数返回值return、函数传参arguments、兼容各浏览器的单一行间样式、元素的插入删除split/shift/sort/pop)

1、函数返回值 即函数的执行结果&#xff0c;不过return返回的值也可以为空&#xff0c; 若无结果时返回undefined。 function show(){ return 12; //return asbjf; } alert(show()); //var ashow(); //alert(a); 2、函数传参 第一种情况&#xff1a;函数参数已知&am…

设置按钮禁用时的样式

前言 按钮有可用和不可用之分&#xff0c;一般按钮不可用时默认是置灰且不可点击的&#xff0c;但是为了配合整个项目的样式和色调&#xff0c;我们需要对不可用的按钮进行样式的调整。 效果展示 按钮可用时的样式&#xff1a;      按钮不可用时的样式&#xff1a;    …

Javascript基础——定时器的使用及简单小应用(简易时钟1、延时提示框)

1、开启时钟、关闭时钟各有两种方式&#xff1a; 开启&#xff1a;setInterval()、setTimeout() 关闭&#xff1a;clearInterval()、clearTimeout() 同时&#xff0c;setInterval()/setTimeout()开启时钟函数传递两个参数——执行函数/参数、间隔毫秒ms数 这两种方式的区别…

Vue公众号退出微信浏览器

前言 开发了一个项目&#xff0c;需要放到公众号中&#xff0c;在路由跳转之后&#xff0c;此时我们单击手机上的返回键&#xff08;部分手机是左右滑&#xff09;&#xff0c;我们希望退出微信浏览器&#xff0c;这个时候应该如何操作呢&#xff1f; 过程 1.安装微信的SDK n…

Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)

1、无缝滚动 原理&#xff1a;&#xff08;1&#xff09;让div动起来&#xff0c;让ul一直向左/向右移动&#xff1b; &#xff08;2&#xff09;即利用定时器让物体从左到右或从右到左进行滚动。 采用offsetLeft——如oUl.style.leftoUl.offsetLeft-2px;&#xff08;由左向右…

Javascript基础——利用Dom元素对节点进行创建、插入和删除、文档碎片

1、创建节点——createElement &#xff08;例如在ul元素后创建li元素&#xff09; var oUldocuemnt.getElementById(ul1); var oLioUl.createElement(li); 2、插入节点(两种方式) 第一种——appendChild 前提是在按钮点击创建基础上&#xff0c;进行相对应节点的插入。 …

Vue实现复制指定的值

项目需求 当我单击“复制”按钮的时候&#xff0c;需要复制上前面的“中国民生…支行”。 实现方式 思路&#xff1a;用剪切板的插件&#xff0c;单击复制的时候复制指定的内容到剪切板上。   代码&#xff1a;   1.安装插件 npm install clipboard --save2.界面引入 im…