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 ...
随机推荐
- 1207D Number Of Permutations
题目大意 给你n个二元组 问你有几种排列是的按两个关键字中的任意一个都不是不降排列的 分析 不妨容斥 我们先加上总的方案数$n!$ 之后我们按第一个关键字排序 因为值相同的情况下不影响答案 所以让总方 ...
- elasticsearch 集群搭建及启动常见错误
1.系统环境 三台服务器(最好是单数台,跟master选举方式有关),确保机器互相ping的通,且都需要装了jdk 8环境,机器IP和 elasticsearch 的节点名称如下: cluster n ...
- php面向对象重的抽象类,接口类与静态
static 静态 <?php class ren { public $name; public static $sex; static function shao() { echo " ...
- Convolutional Neural Networks(3):Convolution and Channels
在CNN(1)和CNN(2)两篇文章中,主要说明的是CNN的基本架构和权值共享(Weight Sharing),本文则重点介绍卷积的部分. 首先,在卷积之前,我们的数据是4D的tensor(width ...
- 远控CVE整理
Windows: CVE-2017-8464(通过快捷方式,可U盘/共享等途径传播)
- Zepto v1.0-1源码注解
/* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...
- zookeeper+dubbo+demo
zookeeper下载地址 https://archive.apache.org/dist/zookeeper/ zookeeper安装和使用 windows环境 https://blog.csdn. ...
- Oracle-常见的错误
1.见下面的例子 create or replace procedure p_qr_stu_cid(s_id in number, c_id out number) as begin select t ...
- Java语言的特点与工作原理
Java语言的特点 1.简单性 Java语言与我们常听到的C++语言很像,但是没有C++那么繁琐.因为Java就是在C++之上设计出来的,设计者把C++的一些特性去掉了,这些特性在实际开发中,程序员也 ...
- dp或dfs(01背包问题)
链接:https://ac.nowcoder.com/acm/contest/993/C来源:牛客网题意:n头牛,给出它们的H高度,问这些牛的高度叠加起来大于等于书架高度,问叠加后的高度与书架的差值最 ...