javaScript表单监听事件的一些注意细节
一、 关于提交按钮和重置按钮的事件句柄监控则在form里面写，可以添加action
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合实验1用户登陆界面</title>
<style type="text/css">
#myform {
text-align: center;
margin: 0 auto;
width: 300px;
}
</style>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function checkData() {
if ($("userName").value.length <8) {
alert("警告！用户名长度不在8~20之间！");
$('userName').focus();
} else if ($('password').value.length <8) {
alert("警告！密码长度不在8~20之间！");
$('password').focus();
}else{
let res = confirm("是否提交？");
if(res){
alert("提交成功！");
return true;
}else {
alert("取消提交！");
}
}
return false;
}
function resetData() {
let res = confirm("是否重置？");
if(res){
$('userName').value="";
$('password').value="";
return true;
}else{
alert("取消重置！");
return false;
}
}
</script>
</head>
<body>
<form name="myform" id="myform" onsubmit="return checkData()" onreset="return resetData()" action="15-1.html">
<fieldset>
<legend style="text-align: center;margin: 0 auto ;">用户登陆</legend>
用户名：<label for="userName"></label><input type="text" id="userName" value="" size="20" maxlength="20"><br/>
密 码：<label for="password"></label><input type="password" id="password" value="" size="20"
maxlength="20"><br/>
<input type="submit" value="提交" >
<input type="reset" value="重置" >
</fieldset>
</form>
</body>
</html>
二、onSelected事件句柄用于单行文本输入框或者多行文本输入框选择文本内容时触发
<form>
<label for="input3"></label><input type="text" id="input3" onselect="changeSize()">
</form>
三、下拉列表框的文本选择内容监控使用的事件句柄为onchange而不是onselect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合实验2显示列表项内容</title>
<script type="text/javascript">
function showBookInfo() {
let obj = document.getElementById('selectBook');
//通过索引获取
let index = obj.selectedIndex;//选中的索引
let value = obj.options[index].value;//选中的value
if(value.length>0)
alert(value);
}
</script>
</head>
<body>
<h3>显示列表项内容</h3>
<form name="myform"><!--关于提交按钮和重置按钮的事件句柄监控则在form里面写，可以添加action-->
<label for="selectBook"></label><select id="selectBook" size="5" onchange="showBookInfo()"><!--是onChange而不是onSelected-->
<option value="教材名称：计算机组成原理 定价：35元">计算机组成原理</option><!--selected是选中，用于单行文本输入框或者多行文本输入框-->
<option value="教材名称：数据结构 定价：38元">数据结构</option>
<option value="教材名称：计算机网络 定价：43元">计算机网络</option>
<option value="教材名称：java程序设计 定价：40元">java程序设计</option>
<option value="教材名称：算法分析 定价：28元">算法分析</option>
</select>
</form>
</body>
</html>
