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>

完。