input相关
input相关
在ios中输入英文首字母默认大写取消方法
<input autocapitalize="off" autocorrect="off" />
//也可以在form元素上设置
<input type="password" >//始终不会开启自动首字母大写。
浏览器表单自动填充
<input type="text" autocomplete="off" name="userName"/>
<input type="password" autocomplete="new-password" name="password"/>
//普通文本框添加 autocomplete="off"，密码输入框添加 autocomplete="new-password"。
//同样也可以在form元素上设置
autocapitalize="words"时，每个单词的开头字母会自动大写。
autocapitalize="characters" 时，每个字母都会大写。
autocapitalize="sentences" 时，每句开头字母会自动大写。
placeholder，提示信息。
可通过input::placeholder设置样式
之前还遇到的,在vue中input显示隐藏聚焦的问题:
1.通过directive自定义组件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-focus v-if='bol'>
<button @click='bol = !bol'>
切换Input框显示和隐藏
</button>
</div>
<script src="./lib/vue.js"></script>
<script>
Vue.directive('focus', {
// 插入到dom的时候执行的钩子函数
// 进行JS中的有关操作
inserted(el) {
el.focus()
}
})
var vm = new Vue({
el: '#app',
data() {
return {
bol: false
}
},
methods: {}
})
</script>
</body>
</html>
2.通过ref直接操作dom元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" ref='inputFocus' v-if='bol'>
<button @click='show'>
切换Input框显示和隐藏
</button>
</div>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
bol: false
}
},
methods: {
show() {
this.bol = !this.bol
// 在dom更新完毕之后立即执行的回调函数执行的操作 页面显示的dom结构是最新的
this.$nextTick(function () {
this.$refs.inputFocus.focus()
})
}
}
})
</script>
</body>
</html>
完。
input相关的更多相关文章
- CSS:与input相关的一些样式设置问题
input是HTML中非常重要,非常常用而又不可替代的元素,在于其相关的样式设置中有时会遇到其他元素不会发生的问题,今天把我印象中的一些小问题和解决方案记录一下. 1.与同行元素上下居中对齐 关于上下 ...
- ionic angularJS input 相关指令 以及定时器 的使用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conte ...
- input相关问题总结
1. 禁止为所有被激活的输入框添加边框 *:focus {outline: none} 2. 禁止为被激活的输入框添加边框,说明:".abc"为输入框对象自定义添加的class类命 ...
- PHP输入流 php://input 相关【转】
为什么xml_rpc服务端读取数据都是通过file_get_contents(‘php://input', ‘r').而不是从$_POST中读取,正是因为xml_rpc数据规格是xml,它的Conte ...
- 16.和input相关的知识点
1.改变input里面placeholder颜色 <input class="pre_name" type="text" placeholder=&quo ...
- js input相关事件（转载）
1.onfocus 当input 获取到焦点时触发. 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空.3.o ...
- input 相关
1.label 标签 for 属性同 input 标签 id 属性联系之一
- input的type=file触发的相关事件
与input相关的事件运行的过程.添加了一些相关的方法测试了一下.input的type=file的运行流程. 我们书写了mousedown,mouseup,click,input,change,foc ...
- android adb shell input各种妙用
项目中使用一个开发版,预留两个usb接口.类似华硕TinkerBoard. 一个用户连接摄像头,一个用于adb调试.结果就没了鼠标的接口.多次切换鼠标和摄像头插头,非常不方便,带摄像头的app没法调试 ...
随机推荐
- 程序员找工作必备 PHP 基础面试题
1.优化 MYSQL 数据库的方法 (1) 选取最适用的字段属性,尽可能减少定义字段长度,尽量把字段设置 NOT NULL, 例如’省份,性别’, 最好设置为 ENUM (2) 使用连接(JOIN)来 ...
- Hibernate一对多
例如:一个用户可以对应多个订单 但一个订单只能对应一个用户 1.创建实体类 2.编写映射文件 <?xml version="1.0"?> <!DOCTYPE h ...
- 说两个我在工作中有价值的bug
看了虫师在公众号上写的一边文章,叫做<面试官问,说一个你在工作非常有价值的bug>.看完虫师举的列子后,我也开始想之前测试的bug,想到之后,觉得有必要记录一下. First,在测试新闻动 ...
- mysql两表合并,对一列数据进行处理
加班一时爽,一直加班~一直爽~ 欢迎收看http://www.996.icu/ 今天弄了下MySQL中两表合并的并且要处理一列数据,这列数据原来都是小写字母,处理时将这列数据改成驼峰命名的~~ 基本 ...
- pd库dataframe基本操作
一.查看数据(查看对象的方法对于Series来说同样适用) 1.查看DataFrame前xx行或后xx行 a=DataFrame(data); a.head(6)表示显示前6行数据,若head()中不 ...
- 分享一个超级好用的SM图床
分享一个超级好用的SM图床 大家都知道我是一个喜欢sm Markdown的人,但是Markdown有个很不方便的地方,就是图片的插入,一般用Markdown编辑器(我用的是Typora)直接插入图 ...
- NOI ONLINE 提高组 序列 根据性质建图
题目链接 https://www.luogu.com.cn/problem/P6185 题意 应该不难懂,跳过 分析 说实话第一眼看到这题的时候我有点懵,真不知道怎么做,不过一看数据,还好还好,暴力能 ...
- Oracle中rownum的用法总结
日期:2019/5/22 内容:oracle:数据库:rownum 数据库查询中,常用到"选取前X个"这样的问题,Oracle没有TOP关键字,这类问题都是通过rownum ...
- 十分钟一起学会Inception网络
作者 | 荔枝boy 编辑 | 安可 一.Inception网络简介 二.Inception网络模块 三.Inception网络降低参数计算量 四.Inception网络减缓梯度消失现象 五.Ince ...
- WeChat-SmallProgram：组件 scroll-view 横向和纵向 案例
scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效. 滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块 ...