javascript onchange()事件:javascript onchange()事件一般用于用户表单中,例如:当文本框内容发生改变时触发的事件,或者下拉列表框内容发生改变时触发的事件等。
示例分享:onchange()事件,用户输入时,将小写字母转换为大写。
此处用到了javascript中的一个方法 toUpperCase()//将小写母转换为大写字母。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>用户表单验证</title>
<script>
function changeValue(){
var userName=document.getElementById("userName") //通过Id获得对象userName
userName.value=userName.value.toUpperCase() //将对象的值进行大小写的转换赋值给当前对象的值;
}
</script>
</head>
<body>
<form name="myform" method="POST" action="register.php" onsubmit="return checkForm()">
userName:<input type="text" name="userName" value="" id="userName" onchange="changeValue()" /><br/>
<input type="submit" name="" value="用户注册" />
</form>
</body>
</html>
onchange事件是在客户端改变输入控件的值,比如一个textbox,会出发的这个事件。
onchange 在元素值改变时触发。
onchange 属性适用于:<input>、<textarea>以及 <select>元素。
语法:onchange="JavaScript代码"
例如
<script type="text/javascript">function upperCase(){
var x = document.getElementById("fname").value//获取input中的值
document.getElementById("fname").value = x.toUpperCase()//input中的值转换成大写。
}
</script>
<body>
<input type="text" id="fname" onchange="upperCase()" /></p> onchange设置为uppercase时间
</body>
select或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,本文为大家介绍下使用js触发select
onchange事件
select
或text的onchange事件需要手动(通过键盘输入)改变select或text的值才能触发,如果在js中给select或text赋值,则无法触发onchang事件,
例如,在页面加载完成以后,需要触发一个onChange事件,在js中用document.getElementById("province").value="湖北"直接给select或text赋值是不行的,要想实现手动触发onchange事件,需要在js给select赋值后,加入下面的语句
document.getElementById("province").fireEvent('onchange')
来实现,
代码如下:
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=gb2312"
/>
<title>无标题文档</title>
<script
type="text/javascript">
var
provinces
=
new
Array()
provinces["湖北"]
=
["武汉","襄阳","随州","宜昌","十堰"]
provinces["四川"]
=
["成都","内江","达州"]
provinces["河南"]
=["郑州","南阳","信阳","漯河"]
function
changeProvince()
{
var
prov
=
document.getElementById("province").value
var
city
=document.getElementById("city")
city.options.length
=0
for(var
i
in
provinces[prov])
{
city.options.add(new
Option(provinces[prov][i],provinces[prov][i]))
}
}
window.onload
=
function(){
var
province
=
document.getElementById("province")
for(var
index
in
provinces)
{
//alert(index)
province.options.add(new
Option(index,index))
}
province.fireEvent("onchange")
}
</script>
</head>
<body>
省份:<select
id="province"
onchange=
"changeProvince()"></select>
城市:<select
id="city"></select>
</body>
</html>