时间戳

首页 > 解决方案 > vue 弹出输入自动获取焦点

vue.js - vue 弹出输入自动获取焦点

问题描述

我正在使用 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弹出对话框在显示弹出对话框时自动获得焦点，所以我尝试使用this.$refs.popup.focus()in showPopup()，但它不起作用。autofocus也不起作用。

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

标签： vue.jsvuejs2

解决方案

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

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

推荐阅读