javascript网页特效——文本输入框和下拉菜单特效
实例一：让文本框只带有下划线
<script type="text/javascript">
function changeTextStyle(){ //让文本框只带有下划线
//获得文本框的DOM
var myText = document.getElementById("myText");
myText.style.borderColor = 'black'; //设置边框颜色
myText.style.borderStyle = 'solid'; //设置边框样式为实线
myText.style.borderWidth = '0 0 1px 0'; //设置边框大小，0代表无
}
script>实例二：首字母或全部字母大写
<script type="text/javascript">
//格式校验
function validateInput(){
//获得文本框的DOM
var myText1 = document.getElementById("myText1");
var myText2 = document.getElementById("myText2");
var val1 = myText1.value; //文本框1的值
var val2 = myText2.value; //文本框2的值
var errMsg = ''; //定义错误提示字符
//判断是否以大写字母开头
if(val1 != '' && (val1.charAt(0)>'Z' || val1.charAt(0)<'A')){
//拼接错误字符
errMsg = '文本框1的首字母需要大写\n';
alert(errMsg);
}
if(val2 != '' && !/\b[A-Z]+\b/.test(val2)){
//拼接错误字符
errMsg = '文本框2的需要全部为大写字母\n';
alert(errMsg);
}
}
script>实例三：只能输入数字的文本框
<script type="text/javascript">
//格式校验
function validateInput(){
//获得文本框的DOM
var myText = document.getElementById("myText");
var val = myText.value; //获取用户输入的值
if(!/\b[0-9]+\b/.test(val)){ //使用正则校验
alert('只能输入数字'); //提示错误信息
}
}
script>实例四：用正则表达式验证Email格式
<script type="text/javascript">
//格式校验
function validateInput(){
//获得文本框的DOM
var myText = document.getElementById("myText");
var email = myText.value; //获得用户输入的Email
//定义正则表达式
var emailReg
= /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
if(emailReg.test(email)){ //判断是否符合格式要求
alert("校验通过，允许提交"); //通过
}else{
alert("校验失败，请检查重新输入"); //验证失败
}
}
script>实例五：成为焦点时清除文本框内容
<script type="text/javascript">
//清楚内容
function clearContent(myText){
myText.value = ''; //把文本内容的值设为空字符
}
script>
<input type="text" value="" onfocus="clearContent(this)"/>实例六：用户输入完以后立刻进行格式校验
<script type="text/javascript">
function validateTel(){ //格式校验
//获得文本框的DOM
var myTel = document.getElementById("myTel");
var val = myTel.value; //获取用户输入的值
if(!/\b[0-9]+\b/.test(val)){ //使用正则校验
alert('只能输入数字'); //提示错误信息
//修改样式，引起注意
myTel.style.border = '1px solid red';
}else if(val.length != 11){ //长度必须是11位
alert('手机号码是11位'); //提示错误信息
//修改样式，引起注意
myTel.style.border = '1px solid red';
}else{
//修改样式，表示通过了
myTel.style.border = '1px solid green';
return true;
}
}
script>
<input type="text" value="" id="myTel" onblur="validateTel()"/>实例七：联动的省市下拉菜单
onchange 事件会在域的内容改变时发生。
<script type="text/javascript">
var arr = new Array(); //数据数组
//定义数据，结构为：id、名字、父id
arr[arr.length] = [1, '北京市', null];
arr[arr.length] = [2, '四川省', null];
arr[arr.length] = [3, '广东省', null];
arr[arr.length] = [4, '北京市', 1];
arr[arr.length] = [5, '成都市', 2];
arr[arr.length] = [6, '广州市', 3];
arr[arr.length] = [7, '深圳市', 3];
//动态设置下拉项目
function fillOptions(type){
if(type == 'province'){
//获取省份下拉菜单的DOM
var province = document.getElementById("province");
province.innerHTML = ''; //内容先置空
//填充省的字符
var proStr = '';
//遍历数组
for(var i=0; ivar item = arr[i]; //当前项
//如果没有父id，则是省份
if(item[2] == null)
proStr += '+item[1]+'';
}
province.innerHTML = proStr;//填充新内容
}else if(type == 'city'){
//获取当前的省份的id
var currProId = document.getElementById("province").value;
if(currProId == '')
return false;
//获取城市下拉菜单的DOM
var city = document.getElementById("city");
city.innerHTML = ''; //内容先置空
//填充市的字符
var cityStr = '';
//遍历数组
for(var i=0; ivar item = arr[i]; //当前项
//判断是否为当前省下的城市
if(item[2] == currProId)
cityStr += '+item[1]+'';
}
city.innerHTML = cityStr ;//填充新内容
}
}
script>
<body style="text-align:center;" onload="fillOptions('province');">
省：<select id="province" onchange="fillOptions('city')">select><br/><br/>
市：<select id="city">select><br/><br/>
body> 实例八：三级联动的省市县下拉菜单
<script type="text/javascript">
var arr = new Array(); //数据数组
//定义数据，结构为：id、名字、父id
arr[arr.length] = [1, '北京市', null];
arr[arr.length] = [2, '四川省', null];
arr[arr.length] = [3, '广东省', null];
arr[arr.length] = [4, '北京市', 1];
arr[arr.length] = [5, '成都市', 2];
arr[arr.length] = [6, '广州市', 3];
arr[arr.length] = [7, '深圳市', 3];
arr[arr.length] = [8, '武侯区', 5];
arr[arr.length] = [9, '青羊区', 5];
arr[arr.length] = [10, '白云区', 6];
arr[arr.length] = [11, '增城市', 6];
arr[arr.length] = [12, '从化市', 6];
//动态设置下拉项目
function fillOptions(type){
if(type == 'province'){
//获取省份下拉菜单的DOM
var province = document.getElementById("province");
province.innerHTML = ''; //内容先置空
//填充省的字符
var proStr = '';
for(var i=0; i//遍历数组
var item = arr[i]; //当前项
//如果没有父id，则是省份
if(item[2] == null)
proStr += '+item[1]+'';
}
province.innerHTML = proStr; //填充新内容
}else if(type == 'city'){
//获取当前的省份的id
var currProId = document.getElementById("province").value;
if(currProId == '')
return false;
//获取城市下拉菜单的DOM
var city = document.getElementById("city");
city.innerHTML = ''; //内容先置空
//填充市的字符
var cityStr = '';
for(var i=0; i//遍历数组
var item = arr[i]; //当前项
//判断是否为当前省下的城市
if(item[2] == currProId)
cityStr += '+item[1]+'';
}
city.innerHTML = cityStr ;//填充新内容
}else if(type == 'area'){
//获取当前城市的id
var currCityId = document.getElementById("city").value;
if(currCityId == '')
return false;
//获取区县下拉菜单的DOM
var area = document.getElementById("area");
area.innerHTML = ''; //内容先置空
//填充区县的字符
var areaStr = '';
for(var i=0; i//遍历数组
var item = arr[i]; //当前项
//判断是否为当前城市下的区县
if(item[2] == currCityId)
areaStr += '+item[1]+'';
}
area.innerHTML = areaStr; //填充新内容
}
}
script>
<body style="text-align:center;" onload="fillOptions('province');">
省：<select id="province" onchange="fillOptions('city')">select><br/><br/>
市：<select id="city" onchange="fillOptions('area')">select><br/><br/>
县/区：<select id="area">select><br/><br/>
body> 实例九：输入文字时文本框边框闪烁
onfocus()和onblur()最好成对编写！
<script type="text/javascript">
//初始化函数
function init(){
//获取所有的文本DOM
var texts = document.getElementsByTagName('input');
//遍历所有的文本框
for(var i=0;ivar t = texts[i];//当前文本框
var timer;
//监听聚焦事件
t.onfocus = function(){
var e = this;//保留当前DOM的引用
//开始闪烁的定时器
timer = setInterval(function(){
//获取当前的边框颜色变量
var c = e.style.borderColor;
if(c == 'yellow'){//如果是黄色
e.style.borderColor = '';//恢复原色
}else{//否则，边框变成黄色
e.style.borderColor = 'yellow';
}
},1000);//每1秒闪烁一次
};
t.onblur = function(){//监听离开事件
//恢复边框颜色
t.style.borderColor = '';
clearInterval(timer);//清除定时器
}
}
}
script>
<body style="text-align:center;" onload="init();">