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>
完。