文本框
CreateTime--2017年4月24日10:40:40
Author:Marydon
一、文本框
（一）标签
<input type="text"/>
（二）通过下拉列表框实现对文本框的录入内容控制
第一部分：HTML
信息是否完整
<select id="" name="" class="" onchange="contrlContent(this);" style="cursor: pointer;">
<option value="0" selected>是</option>
<option value="1">否</option>
</select>
<br/>需要补充的信息：
<input type="text" value="无" name="" id="addMess" readonly/>
第二部分：javascript
/**
* 信息是否完整选项录入信息控制
* @param {Object} obj
* input标签对象
*/
function contrlContent (obj) {
var seleTag = document.getElementById('addMess');
if (1 == obj.value) {
seleTag.value='';
seleTag.readOnly = false;
seleTag.focus();//聚焦
} else if (0 == obj.value && '' == seleTag.value) {
seleTag.value='无';
seleTag.readOnly = true;
} else if (0 == obj.value && '' != seleTag.value) {
if (confirm('确定要清除吗？')) {
seleTag.value='无';
seleTag.readOnly = true;
return;
}
//信息不完整选项选中“否”
obj[1].selected = true;
seleTag.focus();//聚焦
}
}
注意：一定要注意readOnly大小写！！！
CreateTime--2016年10月24日15:17:17
（三）文本框输入内容控制
1.3.1 控制录入的最多是保留两位小数的数字
<input type="text" onkeyup="this.value=this.value.match(/\d+(\.\d{0,2})?/)||[''])[0]" />
UpdateTime--2016年12月17日22:02:18
1.3.2 控制不能录入中文，这里只能使用onkeyup属性，原因见onkeydown-onkeypress-onkeyup文件
<input type="text" onkeyup="this.value=this.value.replace(/[\u4e00-\u9fa5]/g,'')"/>
UpdateTime--2016年12月17日23:10:36
1.3.3 禁用粘贴
input文本框添加属性 onpaste="return false;"
<input type="text" onpaste="return false;"/>
UpdateTime--2017年9月28日11:41:11
1.3.4 文本框设置提示信息（聚焦时，提示信息消失）
方法一：（推荐使用）
使用placeholder属性
<input type="text" placeholder="请输入要下载的url地址..."/>
局限性：IE9及以下版本不支持该属性
方法二：
通过js实现
<input type="text" onblur="if(this.value==''){this.value='请输入要下载的url地址...';this.style.color='#8B0016';}" onfocus="if(this.value=='请输入要下载的url地址...'){this.value='';this.style.color='#000';}" value="请输入要下载的url地址..." style="color:#8B0016;"/>
局限性：该文本框的默认值不是空值
2019年12月23日
限制输入框只能输入数字
js控制
<input id="AGE" name="AGE" onkeyup="this.value=this.value.replace(/\D/g, '')">
html5特性
<input id="AGE" name="AGE" type="number" maxlength='2'>
注意：只有html5页面才可以使用type="number"属性，否则，该name将不会被提交。
2020年4月29日
1.文本框只显示下边框
/* 文本框样式 */
input[type='text'] {
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: solid;/*下边框为实线*/
outline: none;/*聚焦边框*/
width: 95%;
}
2.文本框去掉边框
input[type='text'] {
border: 0;
outline: none;
}
或者
input[type='text'] {
border-top-style: none;
border-right-style: none;
border-left-style: none;
border-bottom-style: none;
outline: none;
}
3.文本框只允许输入整数(>=0)并限制最大值和最小值
<input type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" oninput="if(value>99)value=99" maxlength="2" required><span style="color:red;">*</span>
onkeyup事件，将输入的内容控制为0和正整数，其余内容会被替换为空；
oninput事件，控制输入的最大值为99；
maxlength是html5属性，控制输入字符串的长度；
required是html5属性，将该文本框设置为必填项；
span标签，用于说明该文本框是必填项。