问答

javascript – Vue:如何在按钮点击时调用.focus()

 来源    2019-03-27    1  

我昨天才开始使用vue.js进行编码,而且我不知道如何在不使用“传统”JS方式的情况下“关注”文本框,即document.getElementById(‘myTextBox’).focus().

最初,我的文本框是隐藏的.我有一个“开始”按钮,当用户点击它时,会显示文本框,我想在那里设置焦点,可以这么说.我已经尝试过使用ref,但无济于事(见下面的代码).

HTML:

<input id="typeBox" ref="typeBox" placeholder="Type here..." />

使用Javascript

export default {
  name: 'game',

  methods: {
    startTimer () {
      setTimeout(function () { /* .focus() won't work without this */

        /* ugly and not recommended */
        // document.getElementById('typeBox').focus()

        /* Throws the error: Cannot read property 'typeBox' of undefined */
        this.$refs.typeBox.focus()

        // ... any other options?
          // ...

      }, 1)
    }
  } /* END methods */

} /* END export default */

有谁知道如何做到这一点?请帮忙.

更新:

在输入上添加自动对焦可以在页面加载后立即进行对焦.但是在我的应用程序中,需要多次“重新聚焦”输入字段而不重新加载页面,这就是为什么我需要一种方法来调用.focus().

在这里分享解决方案,万一有人遇到同样的问题……

我终于在一位资深程序员的帮助下解决了这个问题.我还能够使用其vue版本nextTick()消除setTimeout.

正确的JS代码:

startTimer () {
    this.$nextTick(() => {

        // this won't work because `this.$refs.typeBox` returns an array
        // this.$refs.typeBox.focus()

        //this one works perfectly
        this.$refs.typeBox[0].focus()

    })
} /* END startTimer */

说明:

当我使用console.log(这个.$refs.typeBox)时,它返回了这个数组:

这就是代码工作的原因,它必须是typeBox [0] .focus()而不是typeBox.focus().

javascript – Vue Transition not按钮点击时触发
问答我是Vue JS的新手,我正在创建一个缩略图查看器,我将获得一个图像和视频列表作为对象数组.首先,我将只显示5个项目,当用户单击"上/下"按钮时,我想垂直滑动缩略图. 我通过引用S ...
2
javascript – 如何在后退按钮点击时警告用户?
问答www.example.com/templates/create-template 如果他们离开创建模板页面,我想警告用户.我的意思是他们是去另一个页面还是模板. 我使用此代码警告用户重新加载页面并在 ...
1
如何在按钮点击时调用php函数
问答这是两个文件 Calling.php <html> <body> <form action="Called.php" method="get ...
1
javascript – jQuery在按钮点击时使用下拉列表中的值附加UL和LI
问答我有一个下拉列表: <select id="ContentList" name="ContentList"> <option value=&q ...
1
javascript – 使用PhoneGap按钮点击时的原生勾选声音
问答我正在处理touchstart和touchend事件以确定何时单击元素.它运行良好并且响应迅速,但是当我按下按钮时,我错过了本机应用程序中发生的默认点击声. 有没有办法用PhoneGap触发这个声音, ...
1
Javascript,在按钮点击时移动特定图像
问答我想用javascript制作一些东西,我得到的图像是一个轨道,4个人从轨道的左边跑到右边.所以基本上他们需要做的就是向右移动. 当我点击一个按钮时,我正试图将图像向右移动.看到我设法移动图像,但当我 ...
1
javascript – 在按钮点击时动态添加标签
问答Html代码: <div id="container-1"> <ul> <li><a href="#fragment-1&quo ...
1
javascript – 使用fabric.js,在按钮点击时增加画布文本的fontSize
问答我正在使用fabric.js在画布上工作.我已经在画布上创建了文本.现在,按钮的onclick我想增加字体大小. canvas.set({fontSize,40}); 这不行吗?任何其他方法.我已经创 ...
3
javascript – 在按钮点击时调整div的大小,是否应该使用AJAX完成?
问答我想从客户端调整div的大小,它的默认值是height:500px,单击我的按钮将其设置为高度:700px. 这是一个asp.net网站. 我被要求使用AJAX这样做,我不清楚这是否意味着使用来自Mi ...
1
javascript – 如何在按钮点击时复制URL?
问答我想在点击按钮时复制URL.一些我如何尝试,但没有工作. http://www.w3schools.com/code/tryit.asp?filename=FAF25LWITXR5 function ...
1
javascript – 按钮点击时Fancytree激活节点
问答我在我的网站上有一个奇特的树解决方案,我希望有一个触发特定节点的按钮. 我可以通过点击按钮激活特定节点或在加载花式树后触发它吗? 我的花哨代码: $("#tree").fancyt ...
1
离子框架 – 离子2离子 – 搜索栏ionClear按钮点击时不触发
问答我的工具栏中有一个搜索栏,如下所示: <ion-toolbar color="clarity"> <ion-searchbar [(ngModel)]=" ...
1
java – 按钮点击时JButtons不会更新
问答目前显示带有8×8随机彩色按钮网格的GUI. newButton将分数显示重置为0并重新设置网格,就像点击后启动一样.我无法找到许多解决方案,除了它与Java显示它的按钮和分层工作方式有关.这是我正在 ...
1
javascript – 启动Google登录按钮点击
问答您好我正在使用google api登录我的网络应用程序.现在它的工作正常.但问题是当我进入登录页面时,sigin会自动启动.但我不希望这样.我希望用户先单击"登录"按钮,然后该过程 ...
2
Android:在按钮点击时直接滚动/显示ViewPager中的特定页面
问答我想在按钮点击时显示ViewPager的特定页面.它正在工作,但滚动到该特定页面并不顺利,即假设我在页面号. 1但是如果我想去第5,其他页面2,3,4也滚动.我只想滚动到该特定页面.怎么做.我使用了以 ...
2
java – 如何在每次按钮点击时在imageview中旋转图像?
问答这是java代码.我从图库中获取图像.我有一个Button和一个ImageView.它只旋转一次.当我再次点击按钮时,它不是旋转图像. public class EditActivity extend ...
2
javascript – Intro.js – 在外面点击时阻止游览关闭的任何方法?
问答希望合并intro.js游戏插件,但在查看插件时,文档没有强调通过游览部分外的点击阻止游览结束的任何方式.我宁愿有一个"结束游览"按钮,用户可以点击该按钮结束游览,而不是他们错误地 ...
1
黑莓 – 避免在按钮点击时显示菜单
问答在我的应用程序中有一个按钮,当单击按钮时,弹出上下文菜单.如何避免显示上下文菜单? protected void makeMenu(Menu menu, int context){ menu.add( ...
1
javascript – 有没有办法在点击时突出显示特定节点Highcharts Sankey
问答我想知道是否可以在点击类似于states in hover(linkOpacity)上突出显示特定节点,并在单击某个其他节点/系列时将其替换为之前的颜色. 简而言之,当加载图表时,顶部节点最初将被突出 ...
1