页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令
<body>
<div id="app">
<input type="text" value="" id="search">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
}
});
// 原生自动获取焦点
document.getElementById("search").focus();
</script>
</body>
这种方式 虽然可以实现 但是vue不提倡我们dom操作
所以我们自己写一个v-focus的指令 请看下面
自定义v-focus 页面一刷新就获取文本
bind inserted 这两个函数只会执行一次哦，
数据发生改变的时候，updated可能会执行多次哦。
bind:每当指令绑定到元素上的时候，就会立刻执行bind这个函数，
在这三个函数中，第一个参数永远是el,表示被绑定了指令的那个元素，这个el是一个原生的js对象。 inserted：表示元素插入到DOM中的时候，会执行inserted函数。
updated:当数据跟新的时候，就会执行updated,可能会触发多次
ps==>但是在element-ui中，你这种你要使用原生的哪一种方式
你使用自定义指令会失去效果 因为el-input是div哦，而不是input
<body>
<div id="app">
<input type="text" value="" v-focus>
</div>
<script>
Vue.directive("focus", {
bind: function (el) { },
inserted: function (el) {
el.focus();
},
updated(el) {
//当v-model跟新的时候，就会执行这个函数 这个函数会执行多次
},
}) var vm = new Vue({
el: "#app",
data: { }
});
</script>
</body>
页面一刷新让文本框自动获取焦点-- 和自定义v-focus指令的更多相关文章
- Vue系列之 => 自定义全局指定让文本框自动获取焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ASP.NET中页面加载时文本框(texbox控件)内有文字获得焦点时文字消失
代码如下: <asp:TextBox ID="TextBox1" runat="server" Height="26px" MaxLe ...
- Creating Dialogbased Windows Application (4) / 创建基于对话框的Windows应用程序（四）Edit Control、Combo Box的应用、Unicode转ANSI、Open File Dialog、文件读取、可变参数、文本框自动滚动 / VC++, Windows
创建基于对话框的Windows应用程序(四)—— Edit Control.Combo Box的应用.Unicode转ANSI.Open File Dialog.文件读取.可变参数.自动滚动 之前的介 ...
- 关于不使用web服务实现文本框自动完成扩展
来博客园很久了,一直是伸手党,呵呵,现在终于申请了一个账号并开通了博客 下面分享下之前在一个项目里遇到的问题 前段时间在一个项目里要求在文本框内输入要搜索的内容,自动提示与此内容相关的词条 当时在博客 ...
- ASP.NET输入文本框自动提示功能
在ASP.NET Web开发中会经常用到自动提示功能,比如百度搜索.我们只要输入相应的关键字,就可以自动得到相似搜索关键字的提示,方便我们快速的输入关键字进行查询. 那么在ASP.NET中,如果我们需 ...
- 基于JQuery实现的文本框自动填充功能
1. 实现的方法 /* * js实现的文本框的自动完成功能 */ function doAutoComplete(textid,dataid,url){ $("#" + texti ...
- chrome下input文本框自动填充背景问题解决
chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...
- 原生Ajax GET+POST请求无刷新实现文本框用户名是否被注册
实现Ajax需要使用一个核心对象XMLHttpRequest XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页.当页面全部加载完毕后,客户端通过该对象向服务器请求 ...
- Chrome表单文本框自动填充黄色背景色样式
chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...
随机推荐
- 痞子衡嵌入式：恩智浦i.MX RTxxx系列MCU开发那些事 - 索引
大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是恩智浦i.MX RTxxx系列微控制器相关知识. 恩智浦半导体于2018年10月发布的i.MX RTxxx系列开启了ML/AI MCU ...
- .net core 2.1 Nlog.Web.AspNetCore Nlog日志
1.先创建 .net core Web 应用程序,选择API 2.安装 Nuget 包:Nlog.Web.AspNetCore install-package Nlog install-package ...
- axios解决跨域问题（vue-cli3.0）
一.什么是跨域 1.跨域 指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 2.同源策略 是指协议,域名,端口都要相同,其中有一个不同都 ...
- 在Electron中最快速预加载脚本
背景 在Electron打开新窗口的时候,提前加载一段JavaScript脚本,以此内置一些属性或接口给被打开的页面.之所以要以注入方式,而不是页面自己引用,原因是不想麻烦页面自行引用,不想修改旧有的 ...
- Django Forms ChoiceField 选项更新问题
今天使用django的forms,发现单选后台新增数据后,前端表单选项不能刷新 class UserForm(forms.Form): name = forms.ChoiceField( choice ...
- 阿里云ubuntu16.04搭建pptpd
一.搭建pptp vpn 需开放1723端口和gre协议 1.阿里云有个安全组需要开放端口才能访问,需添加新的安全组规则. 登陆阿里云服务器管理控制台,添加安全组规则 入/出方向都填写 端口范围为17 ...
- appium---模拟点击事件
在做自动化的过程中都会遇到一些无法定位到的地方,或者通过元素怎么都定位不成功的地方,这个时候我们可以使用必杀技,通过坐标定位.具体的怎么操作呢? swipe点击事件 前面安静写过一篇关于swipe的滑 ...
- 多次调用settimeout 如何使用单例模式
<script> function aaa() { window.counter = window.counter||1; console.log(window.counter); win ...
- angularjs中directive指令与component组件有什么区别？
壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...
- opencv-python图像二值化函数cv2.threshold函数详解及参数cv2.THRESH_OTSU使用
cv2.threshold()函数的作用是将一幅灰度图二值化,基本用法如下: #ret:暂时就认为是设定的thresh阈值,mask:二值化的图像 ret,mask = cv2.threshold(i ...