javaScriptフォーム監視イベントの詳細への注意
1.送信ボタンとリセットボタンのイベントハンドラーモニタリングについて、フォームに書き込み、アクションを追加します。
コード例
<!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>
2. onSelectedイベントハンドラーは、テキストコンテンツが単一行のテキスト入力ボックスまたは複数行のテキスト入力ボックスで選択されたときにトリガーするために使用されます。
<form>
<label for="input3"></label><input type="text" id="input3" onselect="changeSize()">
</form>
3番目に、ドロップダウンリストボックスのテキスト選択コンテンツモニタリングで使用されるイベントハンドルは、onselectではなくonchangeです。
<!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>
