iview弹出对话框的input框和table中input框每次都自动聚焦focus

最新推荐文章于 2026-05-21 13:45:06 发布

原创最新推荐文章于 2026-05-21 13:45:06 发布 · 1.4w 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了在iview框架中遇到的弹出对话框的input框和table中input框自动聚焦(focus)的问题。首先尝试了html的autofocus属性，但只生效一次。接着尝试v-focus，发现在特定情况下不工作。最后通过监听modal的on-visible-change事件，并结合延时处理，成功实现了每次弹出对话框时input框自动聚焦的效果。对于table中编辑时的input框，未提供解决方案。

一：弹出对话框的input框

1.在html里面设置autofocus属性。

但不难发现只会触发一次，每次在运行起来的时候就执行了获得焦点，之后点击就无效了。

2.在html里面设置v-focus

使用官方例子：

directives: {  
      focus: {  
        // 指令的定义  
        inserted: function (el) {  
          el.focus()  
        }  
      }  
    }

发现不行，insert是一个钩子函数，只要父节点存在，在插入父节点时调用，我这里并没有插入所以没有调用。

然而自己修改后：

directives: {  
       focus:function (el) {  
         el.focus();  
       }  
    }

发现还是不行，当把布局中的输入框改为input时就可以了。

3.由于先要使对话框弹出来，然后在让他自动获取焦点，所以要有先后顺序，在这里使用了modal的 on-visible-change属性，在为true时，再加上延时就可以啦。

methods:{
            aaa() {
                    this.modal1 = true;
                    console.log("111")
            },
            change(val)
                {
                    let a=this;
                    setTimeout(function () {
                        if (val) {
                            a.$refs['re'].focus();
                            console.log("222")
                        }
                    },200);
              }
            }
         }

二：table中点击编辑显示的input框

<i-input  autofocus="true" :id='"input"+index' 
                                            @on-enter="ok_input_target(row,index,tabs.level_code)"
                                            v-model="row.edit_target" placeholder="" style="width: 70px" />

   // 点击编辑修改目标值
        changEdit(val,val1){
          val.edit=2;
             let a=this;
            setTimeout(function(){
              let inputId="input"+val._index;
             var el =document.getElementById(inputId).children;
                for(let i =0,len=el.length;i<len;i++){
                  if(el[i].tagName=='INPUT'){
                      el[i].focus();
                  }
              }
            },300)   
        },