input获取焦点vue_Vue点击显示文本框并获取焦点

Vue中除了核心功能默认内置的指令(v-model和v-show)，Vue也允许注册自定义指令。//注册一个全局自定义指令v-focus

Vue.directive('focus', {

//当被绑定的元素插入到DOM中时……

inserted: function (el) {

// 聚焦元素

el.focus()

}

})

如果想注册局部指令，组件中也接受一个directives的选项：directives: {

focus: {

//指令的定义

inserted: function (el){

el.focus()

}

然后你可以在模板中任何元素上使用新的 v-focus 属性，如下：

Vue中点击显示文本框并获取焦点

钩子函数inserted是指被绑定元素插入父节点时调用。注意这里的用词是插入到DOM中时，点击后显示文本框并获取焦点要用到v-if条件渲染。

new Vue({

el: '#app',

data: {

toggle: false

directives: {

focus: {

// 当绑定元素插入到 DOM 中。

inserted: function (el) {

// 聚焦元素

el.focus()

}

})

注意：autofocus在移动版Safari上不工作

input获取焦点vue_Vue点击显示文本框并获取焦点相关推荐

input得到焦点显示文本框,失去焦点隐藏文本框
上一篇 : input 输入的内容时更改input的宽度此篇是上一篇的延伸功能 input得到焦点显示文本框,失去焦点隐藏文本框思路 : 1 创建一个文本标签font和输入标签input,页面加载 ...
程序显示文本框_vb程序语言题库
vb语言题库一.程序填空共1题 (共计20分) 第1题 (20.0分) 题号:711 难度:中第1章 ----------------------- ...
android 代码控件框高,Android控件_TextView(显示文本框控件)
一.TextView控件的常用属性 1.android:id--控件的id 2.android:layout_width--设置控件的宽度 wrap_content(包裹实际文本内容) fill_pa ...
DOM--操作元素案例：分时显示不同的图片以及问候语；仿淘宝关闭标签案例；隐藏显示文本框内容；仿新浪注册页面中密码长度的判定
分时显示不同的图片以及问候语分析: 根据不同的时间来判断,所以需要获取到系统的时间. 利用分支语言来设置不同的图片需要更换不同的图片,因此需要操作img的元素src 需要一个div来显示不同问候语 ...
android+点击屏幕隐藏键盘,Android点击EditText文本框之外任何地方隐藏键盘的解决办法...
1,实现方法一: 通过给当前界面布局文件的父layout设置点击事件(相当于给整个Activity设置点击事件),在事件里进行键盘隐藏 android:id="@+id/traceroute ...
原生js操作input文本框注册获取焦点、失去焦点事件，设置文本框默认值
<input type="text" value="请输入关键字" class="gray" id="txtInput&qu ...
html隐藏input边框线,html中去掉文本框(input type=text)的边框或只显示下边框
去掉: 只留下边框: CSS - input 只显示下边框 CSS 样式 : border:none; border-bottom: 1px solid #000 文本框input:text ...
html点击弹出文本框,html制作，点击文字超链接显示文本框，再点击文字超链接隐藏文本框...
window.οnlοad=function(){ document.getElementById('click').οnclick=function(){ if (document.getEleme ...
程序显示文本框_python PDF转成图片小程序
你有没有遇到过这样一个需求:把一批PDF文件转存成图片,或者说把某一个文件夹内所有的pdf文件都转换成图片.PDF文件转存成图片格式有很多种方法,可以使用PDF编辑器或者上传到专门转格式的网站上.但是 ...

input获取焦点vue_Vue点击显示文本框并获取焦点

input获取焦点vue_Vue点击显示文本框并获取焦点相关推荐

最新文章

热门文章