一个菜鸟的互联网技术分享博客
您的位置: 主页 > 输入框input、textarea有关零碎知识点
advertisement

输入框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)对输入内容进行正则检验,限制输入的内容必须为。。。,否则无法输入。则加上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、标签属性

 
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

 
原文:https://blog.csdn.net/cindy647/article/details/87886344 
 
zhangren.online
上一篇:JS数组去重的几种常见方法
下一篇:event.stopPropagation()之火狐填坑

您可能喜欢

​Js中获取对象的所有key值

​Js中获取对象的所有key值

​使input文本框不可编辑的3种方法

​使input文本框不可编辑的3种方法

​js字符串去除前后空格

​js字符串去除前后空格

​Web前端经典面试试题及答案

​Web前端经典面试试题及答案

回到顶部