一、实验任务

当用户填写非空白用户名、学号和密码后，将输入域后的星号变为灰色，如果用户清除输入域内容，则再将星号变为红色，见下图；

二、实验思路

使用JavaScript来操作星号*的颜色

1、首先想办法实时获取输入框的内容状态：使用浏览器自带的事件函数方法

oninput（Google、Firefox……的）、OnPropChanged（IE浏览器的）

2、获取输入框状态后可以判断内容长度

3、内容长度大于0则调用 this 当前对象改变css样式的color

三、JavaScript代码

/*
	Event 对象代表事件的状态，比如事件在其中发生的元素、
	键盘按键的状态、鼠标的位置、鼠标按钮的状态。
	oninput 和 onpropertychange 两个事件用于实时获取输入框内容
	oninput="OnInput (event,this)"(在HTML页面中的input标签中使用该事件调用函数)
	函数有两个参数：第一个是事件获取状态，第二个是调用该函数的input对象
*/
//其他浏览器  Google、Firefox……
function OnInput (event,obj) {   
	/*
		如果事件获取输入框内容长度大于0，则改变star星星颜色为gray
		nextSibling表示获取当前对象在HTML中的下一个对象
	*/
	if(event.target.value.length > 0){
		obj.nextSibling.style.color = 'gray';
	}
	else{
		obj.nextSibling.style.color = 'red';
	}

}  

// IE浏览器  
function OnPropChanged (event,obj) {  

	if(event.target.value.length > 0){
		obj.nextSibling.style.color = 'gray';
	}
	else{
		obj.nextSibling.style.color = 'red';
	}
} 

四、完整demo资源下载

JavaScript表单练习.zip-网页制作文档类资源-CSDN下载1．掌握JavaScript脚本的调用和基本语法；2．掌握JavaScript常用内置对象的基更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_45947938/69577700