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

9
发表时间:2019-03-08 14:34

前言:

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

以下不详细讲表单<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)对输入内容进行正则检验,限制输入的内容必须为。。。,否则无法输入。则加上onkeyup="value=value.replace(正则表达式,'替代值')"即可。

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

只能输入英文

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

只能输入中文

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

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

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

不能为空

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

只能输入数字,小数点:

<input type="text" onkeyup="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


文章分类: 技术博客
分享到:
产品与服务
关于我们

技术支持:天成信息


快速通道
客服热线:18354410625
近期促销
公司简介
域名注册
免费备案
旗下品牌
友情链接:  LinkNemo     临沂做网站   小张个人博客