输入框input、textarea有关零碎知识点

 前言：

在日常使用过程中，经常会与输入框打交道，里面涉及了很多零碎的知识点，没掌握好可能会花很多的时间在调输入框的样式、绑定输入框值、过滤等问题上。

以下不详细讲表单<form>,(可查W3手册),而是具体罗列了<input>标签和<textarea>标签的相关零碎知识点以供记忆和查询。

 

一、<input>输入框

1、标签属性

H5包含的所有属性及含义，见http://www.w3school.com.cn/html5/tag_input.asp

H5包含的所有属性的使用，见https://blog.csdn.net/sinat_41104353/article/details/79344873

这里着重介绍几个规定input元素的type值：（下划线为最常用到的）

兼容性问题见https://blog.csdn.net/qq1620657419/article/details/82021850

传统类型

　　text                定义单行的输入字段，用户可在其中输入文本

　　password       定义密码字段。该字段中的字符被掩码

　　file 　　　 定义输入字段和 "浏览"按钮，供文件上传

　　radio　　  定义单选按钮

　　checkbox   定义复选框

　　hidden 　  定义隐藏的输入字段

　　button 　　定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）

　　image 　　定义图像形式的提交按钮

　　reset 　　 定义重置按钮。重置按钮会清除表单中的所有数据

　　submit 　  定义提交按钮。提交按钮会把表单数据发送到服务器

新增类型

　　color 　　　　　　定义调色板

　　tel 　　　　  　　 定义包含电话号码的输入域，自动识别

　　email 　　　  　　定义包含email地址的输入域

　　url 　　　　  　　 定义包含URL地址的输入域

　　search 　　　　　 定义搜索域

　　number 　　 　　 定义包含数值的输入域 可选min,max等限制

　　range 　　   　　  定义包含一定范围内数字值的输入域 可选min,max等限制

　　date 　　　　　　 定义下拉框选取日、月、年的输入域

　　month 　　  　　  定义下拉框选取月、年的输入域

　　week 　　　　　　定义下拉框选取周、年的输入域

　　time 　　    　　   定义选取时间的输入域

　　datetime 　　　    定义选取时间、日 月、年的输入域(UTC时间)

　　datatime-local 　  定义选取时间、日 月、年的输入域(本地时间)

2、input的输入值的绑定

（1）在input标签需要设置name属性值name="..."，在vue中，用v-model="XXX"把input中输入的值绑定到设的的dataXXX中

(2) 若利用form表单提交，在input标签需要设置name属性值name="XX"，表单提交是，会自动将输入值以XX:value形式提交给接收文件

3、input常涉及的几个绑定事件

在vue中使用时，将on换成@，如onclick > @click="..."

onclick 在用户用鼠标左键单击对象时触发。

onfocus 当对象获得焦点时触发。

onblur 在对象失去输入焦点时触发

onchange 当对象或选中区的内容改变时触发。

onkeydown 当用户按下键盘按键时触发。

onkeyup 当用户释放键盘按键时触发。

onactivate 当对象设置为活动元素时触发。

onselect 当当前选中区改变时触发。

onresize 当对象的大小将要改变时触发。

onmousedown 当用户用任何鼠标按钮单击对象时触发。

onmouseenter 当用户将鼠标指针移动到对象内时触发。

onmouseleave 当用户将鼠标指针移出对象边界时触发。

onmousemove 当用户将鼠标划过对象时触发。

onmouseout 当用户将鼠标指针移出对象边界时触发。

onmouseover 当用户将鼠标指针移动到对象内时触发。

onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

更全面的事件可见 https://blog.csdn.net/a245755895/article/details/76253078

4、其他

（1） 去除input默认样式

input {

border: 0; // 去除未选中状态边框

outline: none; // 去除选中状态边框

background-color: rgba(0, 0, 0, 0);// 透明背景

}

（2）对输入内容进行正则检验，限制输入的内容必须为。。。，否则无法输入。则加上οnkeyup="value=value.replace(正则表达式,'替代值')"即可。

以下为几个常用的输入限制：

只能输入英文

<input type="text" οnkeyup="value=value.replace(/[^a-zA-Z]/g,'')">

只能输入中文

<input type="text" οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')">

身份证号只能输入数字和英文x

<input type="text" οnkeyup="value=value.replace(/[^\d\x\X]/g,'')">

不能为空

<input οnblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')">

只能输入数字，小数点：

<input type="text" οnkeyup="value=value.replace(/[^\d\.]/g,'')">

有关正则匹配相关知是，可查阅正则有关零碎知识点

 

二、<textarea>多行文本输入区域

1、标签属性

属性	值	描述
autofocus	true false	在页面加载时，使这个 textarea 获得焦点。
cols	number	规定文本区内可见的列数。
disabled	true false	当此文本区首次加载时禁用此文本区。
form	true false	定义该 textarea 所属的一个或多个表单。
inputmode	inputmode	定义该 textarea 所期望的输入类型。
name	name_of_textarea	为此文本区规定的一个名称。
readonly	true false	指示用户无法修改文本区内的内容。
required	true false	定义为了提交该表单，该 textarea 的值是否是必需的。
rows	number	规定文本区内可见的行数。

2、输入值的绑定与常用事件与input无异

3、其他

（1）textarea默认是可以手动拉伸的，通常为了保证布局，会禁止拉伸：

行内样式添加 style="resize:none;" 

（2）连续写两个textarea，会带有默认的间隔，不是border，清除间隔的方式，给这两个textarea的CSS样式加上 display: block

（3）去除textarea默认样式，同input

（4）textarea根据输入内容高度自适应

原生js写法：https://blog.csdn.net/qq_38347669/article/details/81702814

Jquery:http://www.softwhy.com/article-9626-1.html

2、<div>模拟textarea实现可输入

1、利用contenteditable="true"属性，不常见，以下介绍div模拟textarea实现高度自适应

https://www.cnblogs.com/dffy/p/6386318.html