关于js的onchange方法。

JavaScript014

关于js的onchange方法。,第1张

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>