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 ...
随机推荐
- EZOJ #385 排列
分析 对于第一问我们直接从上到下枚举所有横边 每一次交换两边的列标号即可 对于第二问我们发现答案就是最终序列的逆序对数量 代码 #include<bits/stdc++.h> using ...
- VS code 同步设置与插件
准备工作:拥有一个github账户,电脑上需安装VSCode.实现同步的功能主要依赖于VSCode插件 "Settings Sync"第一步:安装同步插件Settings Sync ...
- Java常用工具——java多线程
一.线程的创建 方式一:继承Thread类,重写run()方法 package com.imooc.thread1; class MyThread extends Thread{ public MyT ...
- shtml与html
前言 在浏览网页的时,忽然发现了一个网址不是以[.html]结尾,而是[.shtml].顿时勾起了我的好奇心,这是什么鬼?于是打开google,开始维基. SHTML 什么是 SHTML 使用SSI( ...
- OJ测试数据追溯方法
https://blog.csdn.net/iwts_24/article/details/79240987 我是从这个博客知道还有从比赛官方网站扒测试数据的方法,但是下面的链接有些是失效的. 所以我 ...
- jQuery遍历集合
jQuery 遍历List集合 $(function(){ var tbody = ""; var obj =[{"name ":"xxxx&quo ...
- 协程分析之context上下文切换
协程现在已经不是个新东西了,很多语言都提供了原生支持,也有很多开源的库也提供了协程支持. 最近为了要给tbox增加协程,特地研究了下各大开源协程库的实现,例如:libtask, libmill, bo ...
- Aria2+WebUI+caddy搭建私有网盘
Aria2安装 wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubi/doubi/master/ar ...
- python获取ip地址
#!/usr/bin/env python # -*- coding: utf-8 -*- import os import socket,fcntl,struct #crontab下shell命令无 ...
- [暑假集训Day1T3]新的开始
新建一个虚拟节点后直接跑最小生成树即可,从虚拟节点往每个节点连的边权为每个点建发电站的代价,许多人的考场贪心策略是:先构建原图的最小生成树后找一个花费最小的地方建发电厂.但是这样做不对的地方在于:如果 ...