H5文本输入框与移动端键盘事件

HTML中的输入框主要有两种和
首先介绍一下二者的区别：

<input>标签：单行输入框，不会换行，无论尺寸有多大，只能在一行显示
可以通过width和 height 来设置大小，有一点需要注意，如果通过css设置了大小，size属性将不起作用

<textarea>标签：多行输入框，可以根据输入框的大小自动换行
既可以像<input>标签一样通过css，size属性设置大小
还可以根据它特有的rows和 cols属性来限制尺寸
rows控制显示的行数
cols表示的列数，一般如果设置为20 每行显示的汉字为10个，不是特别精确的要求，一般不用

二者在css中设置样式的方法大致相同
多选输入框设置在如下方法中：

textarea{
    width: ;//宽度
    height: ;//高度
    font-size: ;//输入显示的字体大小
    color: ;//字体颜色
    border: none;//取消边框样式
    outline: none;//取消轮廓样式
    resize: none;//不可拖拽大小
}
//下面的方法是设置未输入时默认显示文字的样式，属性方法相同
textarea::-webkit-input-placeholder {

}

而单选输入框时，则是在这个方法里设置，属性方法同上

input{
    border: none;
    outline: none;
    resize: none;
    font-size: 16px;
    color: #666666;
}
input::-webkit-input-placeholder {
    color: #cccccc;
    font-weight: 300;
}

多选输入框

属性较少，想对较为简单一般常用的属性如下：

1. maxlength：允许输入的最大字符
2. @input：后面加上方法名，当输入框改变时，用于捕捉事件，例如统计字数输入变化等等
3. v-model：获取输入的字符信息
4. placeholder：默认展示的字符信息
5. @blur：在移动端键盘使用过程中，键盘弹出时，无需处理，视图会自动上移；
   但是，当键盘隐藏时，视图还继续保持上移的状态，通过添加此方法，设置视图还原（置顶操作），
   使视图还原。这个方法是在光标失去焦点时，会触发的方法
6. autofocus：当加上此属性后，默认聚焦光标在输入框

总结：上面的属性及方法，组合在一起的代码：

<textarea maxlength="最大字符" @input='增加删除字符触发的方法' @blur="失去光标触发的方法" 
v-model='获取输入的字符'  placeholder='默认文字'></textarea>

还有一些其他的属性

• disabled：规定禁用该文本区
• readonly：规定文本区为只读
• required：规定文本区域是必填的

单选输入框

在多选框中用到的属性，单选框同样适用，特有的属性：type
它决定了规定要显示的input元素的类型，列举几个常用的属性

• text：最基本的文字输入
• button：变成可以点击的按钮，通过onclick绑定事件，调用js方法
• radio：定义单选按钮，多个组合一起使用
• checkbox：定义多选按钮，多个一起使用
• password：密码输入框，输入的字符由密文替代

一些其他的属性详见更多的input属性

<input type="text" oninput="value=value.replace(/[^\d]/g,'')" maxlength="可输入最大字符"
                    placeholder="默认展示文字" @input='修改时触发' v-model='输入的字符' @blur="失去光标触发" autofocus>

其中有一段οninput=“value=value.replace(/[^\d]/g,’’)” 是一个正则式，来过滤显示非数字的字符

键盘隐藏后视图回归的方法

在js中实现输入框中加入的@blur方法
例如

@blur="inputBlur"

js中实现：
            inputBlur() {
                // window.scrollTo(0, 0);
                setTimeout(function () {
                    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
                }, 100);
            },

加了一个延时操作，来执行视图置顶