精华内容
下载资源
问答
  • Vue之input框自动获取焦点+内容形式修改
    千次阅读
    2019-09-17 14:13:40

    前言

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

    总结

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

    更多相关内容
  • input框自动获取焦点

    2020-12-08 17:46:41
    fm:事情是这样的,因为是点击一个按钮 然后出现一个弹出层,弹出层有个输入框,在点击弹出层的时候就自动获取焦点,使用autofocus的话,就只会在第一次点击的获取焦点,因为model没有更新,上片段 <van-popup v-...

    fm:事情是这样的,因为是点击一个按钮 然后出现一个弹出层,弹出层有个输入框,在点击弹出层的时候就自动获取焦点,使用autofocus的话,就只会在第一次点击的获取焦点,因为model没有更新,上片段

    
     <van-popup v-model="payment" position="bottom" :style="{ height: '11%' }" >
                        <van-cell-group>
                            <van-field  ref="atlas-name-input"   v-model="payment_input" label="姓名" id='inputId' placeholder="请输入姓名" />
                        </van-cell-group>
                    </van-popup>
    
    
    
       //点击弹出层
       paymentinput(){
                    this.payment=true;
                    this.$nextTick(()=>{ //自动获取焦点 element组件autofocus失效
                        this.$refs['atlas-name-input'].$refs.input.focus()
                    })
                },
    
    
    
    
    展开全文
  • vue element.ui中input框自动获取焦点

    万次阅读 2019-06-28 16:34:21
    vue element.ui中input框自动获取焦点 需求:element-ui中使el-input标签自动获取焦点 解决方法 HTML: // 使用自定义指令 v-focus <el-input v-focus size="small" v-model="scope.row.comment" placeholder="请...

    vue element.ui中input框自动获取焦点

    需求:element-ui中使el-input标签自动获取焦点

    解决方法

    HTML:

    // 使用自定义指令 v-focus
    <el-input v-focus size="small" v-model="scope.row.comment" placeholder="请输入内容" @change="handleEdit(scope.$index, scope.row)" ></el-input>
    

    JS:

    // 使用directives注册v-focus全局指令
    directives: {
        focus: {
            inserted: function (el) {
            el.querySelector('input').focus()
            }
        }
    },
    
    展开全文
  • 创建一个自定义指令通过:Vue.directive()这个方法来实现在使用自定义指令时 我们只需要用 v-...配置项),在上面我们使用的是inserted这个配置项,inserted是被指令绑定的元素 ,插入到真实dom时会自动执行。inserte...

    创建一个自定义指令通过:Vue.directive()这个方法来实现

    6e39400e78df

    在使用自定义指令时 我们只需要用    v-指令名,在这里我们创建了一个自定义指令叫xixi,所以就是   v-xixi   表示我们使用了这个自定义指令

    6e39400e78df

    Vue.directive('指令名',配置项),在上面我们使用的是inserted这个配置项,inserted是被指令绑定的元素 ,插入到真实dom时会自动执行。

    inserted接收两个参数

    6e39400e78df

    我们来打印一下这两个参数

    6e39400e78df

    6e39400e78df

    可以看到  el 就是我们被绑定的元素 参数二就是自定义指令对象,里面存放这我们的指令名 xixi 以及 value 王一。也就是说:我们通过Vue.directive这个方法,创建了一个名叫xixi的自定义指令,当我们把这个自定义指令绑定到一个元素上的时候,当这个元素从虚拟dom变成了真实dom,就会执行inserted这个方法,当执行这个方法时,el就会执行原生js里面的focus()这个方法进行聚焦。

    逆战班!

    展开全文
  • 需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一、首先想到的用vue指令 v-focus,然而没有成功v-model="book.isbnOrIssn"@change.native=...
  • <input type="text" v-myfocus> Vue.directive('myfocus', { // 通过 v-myfocus来调用 inserted(el) { // 当前标签对象 el.focus() } })
  • 在做项目的过程中,需求文档有个要求是,当进入页面后,第一个行input框自动获取焦点,并弹出数字软键盘。 autofocus 属性 : 文本输入字段被设置为当页面加载时获得焦点   &lt;input type="tel"...
  • 有时候会遇到要输入框自动获取焦点的情况,解决如下: 方法一: 步骤: 1.在script中写directives,注册一个全局的自定义指定 v-focus directives: { focus: { inserted: function(el) { el.querySelector("input...
  • // 进入弹框的input框自动获取焦点 ‘showModal.MZBuhua’: function () { this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.refs[‘modelName’].focus() }) }, ...
  • 我们需要input输入框自动获取焦点 我们可以通过以下代码实现 使用自定义指令 v-focus <template> <el-input v-focus v-model="scope.row.comment" placeholder="请输入内容" @input="onInput"></el-...
  • Vue.directive('myfocus', { inserted: (el, binding) => { if (binding.value == true || binding.value == undefined) { ...使用自定义的自动获取焦点指令 // 执行 <input v-myfocus v-model="value" />
  • vue中页面上的input框自动获取焦点

    千次阅读 2020-03-18 20:02:13
    这个问题看了网上的一些资料有一定的帮助,但我还是...el-input v-model="ghStats.authCode" ref="gain" @keyup.enter="onSubmit" autofocus="autofocus" > </el-input> this.$nextTick(() => { ...
  • 弹框input标签自动获取焦点

    千次阅读 2019-08-15 16:56:11
    html中,只会在页面加载后,点击按钮打开弹窗第一次,会自动获取焦点,之后就打开弹窗就不会再有弹窗事件,所以这样只能直接在页面中的输入框中使用,不适合用在弹窗中 <input type="text" id="box" autofocus=...
  • element input输入框自动获取焦点

    万次阅读 2019-10-25 14:25:40
    最近项目中在做表单的时候,需要自动滚动到评论框,并且让评论框自动聚焦,这就需要手动触发输入框的 focus 状态。 但是,element并不支持autofocus属性,那就只能通过原生的js效果获取聚焦效果了 document....
  • 坑的样子 为了用户体验,我想着用户打开页面时输入用户名的...既然自动获取焦点行不通,那就自己手动来吧,先给input打上标签 接着就拿到这个标签再把input的focus激活试试?试试就试试! 代码中的 isPlatform
  • 1.输入框自动获取焦点 <input ref="myInput" type="text"> 标签就这么写,主要在于ref这个属性,然后在js里面写上代码 this.$refs.myInput.focus(); 这样就会自动获取焦点了,不过有一点需要注意 **...
  • 如果想在DOM状态更新后做点什么,则需要用到nextTick。在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中,因为created()钩子函数执行的时候DOM并未进行任何渲染,而此时进行DOM操作...
  • 在vue中一般很少会直接操作DOM,但偶尔会用到,这时可以通过【ref和$refs】两个来实现(减少获取dom节点的消耗)。 ref的用法: ref是用来给元素或子组件注册引用信息,引用信息会注册在父组件的 $refs 对象上。 ...
  • 项目中有个需求 一个用扫描枪输入的input框 为了避免每次都需要人为点击 需要做成当打开页面时该input框自动获取焦点 <input type="text" name="card" id="card"> document.getElementById("card")....
  • // 调用时直接在input或textarea标签上添加v-focus指令 Vue.directive('focus', { //全局注册自定义指令 inserted (el) { if (['INPUT', 'TEXTAREA'].indexOf(el.tagName) !== -1) { el.focus() } else { let ...
  • 开始界面如下:当我点击时,变成:我的问题:当切换到input时没办法获取焦点我的代码:搜索调查模板v-model="val"type="text"placeholder="搜索调查模板"@change="changeInput()"ref="myInput"autofocus>...
  • 进到页面后input输入框自动获取焦点

    万次阅读 2017-07-19 15:11:55
    只要在该input标签后添加autofocus="autofocus"即可 代码实例:      用户名:autofocus="autofocus"/>  密码:
  • 此文章的记录主要为了以后如果遇到...vue如何自动获得input框焦点呢?官网给出的答案是:自定义指令:v-focus // 局部指令 directives: { focus: { // 指令的定义 inserted: function(el){ el.focus() } ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,079
精华内容 9,631
关键字:

input框自动获取焦点