iview input实现默认获取焦点并选中文字
1. 业务背景
配置页面,可新建和复制任务;当复制任务的时候,要把名字的input框默认获取焦点,并全选任务名。效果如下:
2. 代码实现
<template>
<Form :model="config">
<FormItem label="任务名称">
<Input
ref="taskNameInput"
id="taskNameInput"
placeholder="请输入任务名称"
v-model.trim="config.taskName"
/>
</FormItem>
···
</Form>
</template>
<script>
export default {
name: "Config",
computed: {
taskName() {
return this.$route.query.taskName;
}
},
data() {
return {
config: {
taskName: "",
···
}
};
},
methods: {
async getTaskConfig() {
// 接口获取数据
},
setNameFocus() {
this.$refs.taskNameInput.focus();
document.querySelector("#taskNameInput .ivu-input").select();
}
},
async mounted() {
if (this.taskName) {
await this.getTaskConfig();
this.setNameFocus();
}
}
};
</script>
说明: 因为iview的Input并没有提供选中的方法,所以这时候只能使用原生的select()方法进行选中;调用该方法的dom是原生的input,而不是iview的i-input
iview input实现默认获取焦点并选中文字的更多相关文章
- 小程序input输入框获取焦点时,文字会出现闪动
最近在开发小程序时,发现一个有趣的现象.input里面设置了placeholder,随后当输入框获取焦点时,文字会出现一瞬间的抖动,随后正常. 猜想可能是设置的font-family不同引起的抖动,但 ...
- Windows 10设置桌面图标间距、窗口的背景颜色、选中文字的背景颜色
Windows 10取消了“高级外观设置”(或者叫“窗口颜色和外观”设置),想调整一些参数只能进注册表了. 修改后可能需要注销或重启才能生效. 按Win+R,然后输入regedit进入注册表编辑器. ...
- css3应用之自定义选中文字的背景颜色
在看很多的博客主题时候发现大多数都对选中文字的背景颜色做了相应的处理.其实这样是很符合用户体验的.因为有很多的人会用鼠标选择着一行一行的阅读.其中就包括本人... 浏览器中默认的选中的文字颜色为白色, ...
- js 控制选中文字
//脚本获取网页中选中文字 var word = document.selection.createRange().text; //获取选中文字所在的句子 var range = documen ...
- macOS Sierra 触控板无法三指拖移窗口、三指选中文字的解决方法
问题:升级macOS Sierra新系统后,发现触摸板无法进行三指拖移窗口.三指选定文字的操作.在“系统偏好设置”——“触控板”内无法进行设置. 解决:“系统偏好设置”——“辅助功能”——“鼠标与触控 ...
- html body标签的几个属性 禁用鼠标右键,禁用鼠标选中文字等
<body oncontextmenu='return false' ondragstart='return false' onselectstart ='return false' onsel ...
- c# webbrowser 获取用户选中文字
原文:c# webbrowser 获取用户选中文字 最近一直被一个问题困扰,有一个文本框,一个webbrowser控件,一个上下文菜单, webbrowser 获取用户选中文字" tit ...
- CSS3禁止用户选中文字——user-select: none;
需求:现在有一个需求是在移动端让你禁止用户选中文字,你会怎么做呢?如下图 解决方法:使用CSS3新增属性 user-select: none; -webkit-user-select:non ...
- css只改变input输入框光标颜色不改变文字颜色实现方法
input:focus{color:blue}//光标颜色 input{ text-shadow: 0px 0px 0px red;//文字颜色 -webkit-text-fill-color: tr ...
随机推荐
- 【HANA系列】SAP HANA的特点总结
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA的特点总结 ...
- 查看mysql 的版本信息
在进入mysql的情况下 在终端的情况下:
- Vue3.0响应式实现
基于Proxy // 弱引用映射表 es6 防止对象不能被回收 let toProxy = new WeakMap(); // 原对象: 代理过得对象 let toRaw = new WeakMap( ...
- [CF960G]Bandit Blues(第一类斯特林数+分治卷积)
Solution: 先考虑前缀,设 \(f(i, j)\) 为长度为 \(i\) 的排列中满足前缀最大值为自己的数有 \(j\) 个的排列数. 假设新加一个数 \(i+1\) 那么会有: \[ f ...
- 移动端web整理 移动端问题总结,移动web遇到的那些坑
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对i ...
- 洛谷 P1339 [USACO09OCT]热浪Heat Wave(dijkstra)
题目链接 https://www.luogu.org/problemnew/show/P1339 最短路 解题思路 dijkstra直接过 注意: 双向边 memset ma数组要在读入之前 AC代码 ...
- spark连接hive找不到table
Caused by: org.apache.spark.sql.catalyst.analysis.NoSuchTableException: Table or view 'xxxx' not fou ...
- Mac下安装nodejs,然后安装Vue-devtools工具
一.安装nodejs 1.这一步简单,只要上官网下载下来,直接按照提示安装就可以,mac版本的安装方法很简单. 下载nodejs的官方网址是: nodejs.org ,浏览器输入就可以跳转到了 ...
- ubuntu安装supervisor以及使用supervisor启动.net core进程
1.下载.net core项目ubuntu系统运行容器dotnet 1.版本:dotnet-sdk-2.1.3-linux-x64.tar.gz 2.将下载好的包上传到ubuntu ...
- k3 cloud中提示总账期末结账提示过滤条件太长,请修改此过滤条件
k3 cloud中提示总账期末结账提示过滤条件太长,请修改此过滤条件,如下图所示: 处理方法: 请尝试系统配置文件common.config中将如附件所示的参数值改大,建议值为2000,并在系统清理缓 ...