vue 弹出输入自动获取焦点答案

【问题标题】：vue popup input get focus automaticallyvue 弹出输入自动获取焦点
【发布时间】：2021-04-25 01:04:48
【问题描述】：

我正在使用 vue 2.x

我有一个 html 看起来像（并且这个 html 文件包含在一个 jsp 文件中）：

<html>
<body>
    <div id="myDiv">
        <input type="text" v-model="input" @click="showPopup"/>
        <div id="popupDiv" class="modal fade" role="dialog"
         aria-labelledby="modalLabel" aria-hidden="true">
            <textarea id="textArea" v-model="textarea" ref="popup"></textarea>
        </div>
    </div>
    <script>
        myVM = new Vue({
            name: 'myVM',
            el: 'myDiv',
            data() {
                return {
                    input: '',
                    textarea: ''
                }
            },
            methods: {
            
                showPopup() {
                
                    jQuery("#popupDiv").modal('show');
                    this.$refs.popup.focus();
                }
            }
        })
    </script>
</body>
</html>

当用户点击这个input时，会弹出对话框（引导模式）。

现在我希望弹出对话框的textarea 在弹出对话框显示时自动获得焦点，所以我尝试在showPopup() 中使用this.$refs.popup.focus()，但它不起作用。 autofocus 也不起作用。

沙盒是https://t7huy.csb.app/

【问题讨论】：

将自动对焦属性添加到文本区域。
如果您在#popupDiv 上通过v-if 或v-show 触发弹出窗口-您应该等待$nextTick 在尝试聚焦文本区域之前-否则如果它尚不可见浏览器将忽略聚焦请求。
@shahidiqbal 我之前试过autofocus，它也不起作用。
@IVOGELOV 它不是由v-if 或v-show 触发的，它是一个引导模式。

标签： vue.js vuejs2

【解决方案1】：

在showPopup方法中打开引导模式`

showPopup(){
  $('#popupDiv').modal('show');
  this.$refs.popup.focus();
},

【讨论】：