js练习8 --- 事件处理程序表单脚本
Posted 劳埃德·福杰
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js练习8 --- 事件处理程序表单脚本相关的知识，希望对你有一定的参考价值。
1.第一题
某网页中，假设有一个按钮，请完成下列操作，需要考虑跨游览器的情况。
1.当把鼠标移到按钮上，按钮的颜色会发生变化，移走后消失;
2.假设按钮点击后发生动态的改变了网页的背景颜色，并且弹出游览器的版本信息;
3.假设按钮点击后默认操作是访问南林官网，现在需要将其行为阻止。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="https://www.njfu.edu.cn/" id="myLink">
<button id="myBtn">按钮</button>
</a>
<script>
let btn = document.getElementById("myBtn");
let handler = function(event)
switch(event.type)
case "mouseover":
event.target.style.backgroundColor = "lightblue";
break;
case "mouseout":
event.target.style.backgroundColor = "";
break;
;
let handler2 = function(event)
let appVersion = navigator.appVersion;
event.currentTarget.style.backgroundColor = "gray";
setTimeout(function()
alert(appVersion);
, 100); //背景颜色改变需要时间,防止在这期间alert阻塞JS,从而保证背景颜色先变,然后再alert
btn.onmouseover = handler;
btn.onmouseout = handler;
document.body.onclick = handler2;
//阻止默认跳转
let link = document.getElementById("myLink");
link.onclick = function(event)
event.preventDefault();
;
</script>
</body>
</html>2.第二题
某网页用户注册页面，包含需要填写的内容:姓名(文本框)，性别(选择按钮)，出生年月日（文本框)，身份证号码（文本框)，手机号码(文本框）。
·使用自动对焦功能，针对后三个文本框，当输入完一个文本框，自动跳转到下一个文本框。
·需要考虑过滤输入，针对后三个文本框，对于非数字的输入，直接屏蔽。
·对于姓名文本框，需要对非法字符的提醒，包括:数字和标点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3>注册</h3>
<form method="post" action="" id="myForm">
<label for="username">姓名:</label> <input type="text" name="username" id="username" onchange="checkInput(event)" required>
<br/>
<label for="username">性别:</label>
<input type="radio" name="sex" value="male" checked="checked" id="male" />
<label for="male">男</lable>
<input type="radio" name="sex" value="female" id="female" />
<label for="female">女</label>
<br />
<label for="birthDate">出生年月:</label> <input type="text" name="birthDate" id="birthDate" maxlength="8">
<br/>
<label for="idNumber">身份证号码:</label> <input type="text" name="idNumber" id="idNumber" maxlength="18">
<br/>
<label for="tel">手机号码:</label> <input type="text" name="tel" id="tel" maxlength="11">
<br/>
<button>提交</button>
</form>
<script>
// 自己封装EventUtil对象
let EventUtil =
addHandler: function(element, type, handler)
if (element.addEventListener)
element.addEventListener(type, handler, false);
else if (element.attachEvent)
element.attachEvent("on" + type, handler);
else
element["on" + type] = handler;
,
getEvent: function(event)
return event ? event : window.event;
,
getTarget: function(event)
return event.target || event.srcElement;
,
getCharCode: function(event)
if (typeof event.charCode == "number")
return event.charCode;
else
return event.keyCode;
,
preventDefault: function(event)
if (event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
;
// 自动对焦
(function()
function tabForward(event)
event = EventUtil.getEvent(event);
let target = EventUtil.getTarget(event);
if (target.value.length == target.maxLength)
let form = target.form;
let len = form.elements.length;
for (let i=0; i < len; i++)
if (form.elements[i] == target)
if (form.elements[i+1])
form.elements[i+1].focus();
return;
let textbox1 = document.getElementById("birthDate"),
textbox2 = document.getElementById("idNumber"),
textbox3 = document.getElementById("tel");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
)();
// 过滤输入
(function()
function shieldNaN(event)
event = EventUtil.getEvent(event);
let target = EventUtil.getTarget(event);
let charCode = EventUtil.getCharCode(event);
// 屏蔽非数字
if (!/\\d/.test(String.fromCharCode(charCode)))
EventUtil.preventDefault(event);
let birthDate = document.getElementById("birthDate");
let idNumber = document.getElementById("idNumber");
let tel = document.getElementById("tel");
EventUtil.addHandler(birthDate, "keypress", shieldNaN);
EventUtil.addHandler(idNumber, "keypress", shieldNaN);
EventUtil.addHandler(tel, "keypress", shieldNaN);
)();
// 非法字符提醒
function checkInput(event)
let text = event.target.value;
if(/\\d/.test(text) || /[,|.|?|!|:|"|']/.test(text))
alert("请勿输入数字和标点！");
</script>
</body>
</html>3.第三题
某网页中有个多项选框，选择用户熟练的编程语言，现选选择框内有:C，C++，Java，javascript，php五个选项，使用DOM方法完成以下操作:
1．实现多项选择。
2.添加两个选择:Python和Perl，并移除掉PHP。
3．将Python项移到Java之后。
4．添加一个多选框，把Java和Python移动到添加的多选框中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<label for="selLanguage">选择您熟悉的编程语言：</label>
<select name="selLanguage" id="selLanguage" size="5" multiple>
<option value=" C">C</option>
<option value="C++">C++</option>
<option value="Java">Java</option>
<option value="Javascript">Javascript</option>
<option value="PHP">PHP</option>
</select>
<select name="selLanguage2" id="selLanguage2" size="5" multiple>
</select>
<br/><br/>
<button id="btn1">添加Python和Perl,并移除PHP</button>
<button id="btn2">将Python移到Java之后</button>
<button id="btn3">将Java和Python移到新增的多选框</button>
</div>
<script>
let EventUtil =
addHandler: function(element, type, handler)
if (element.addEventListener)
element.addEventListener(type, handler, false);
else if (element.attachEvent)
element.attachEvent("on" + type, handler);
else
element["on" + type] = handler;
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let btn3 = document.getElementById("btn3");
// 添加Python和Perl,并移除PHP
EventUtil.addHandler(btn1, "click", function(event)
let selectbox = document.getElementById("selLanguage");
let newOption = new Option("Python", "Python");
selectbox.add(newOption, null);
let newOption2 = new Option("Perl", "Perl");
selectbox.add(newOption2,null);
selectbox.remove(4); // 移除PHP
);
// 将Python移到Java之后
EventUtil.addHandler(btn2, "click", function(event)
let selectbox = document.getElementById("selLanguage");
let textbox = document.getElementById("txtIndex");
let optionToMove = selectbox.options[4];
selectbox.insertBefore(optionToMove, selectbox.options[3]);
);
// 将Java和Python移到新增的多选框
(function()
let btn3 = document.getElementById("btn3");
EventUtil.addHandler(btn3, "click", function(event)
let selectbox1 = document.getElementById("selLanguage"),
selectbox2 = document.getElementById("selLanguage2");
selectbox2.appendChild(selectbox1.options[2]);
selectbox2.appendChild(selectbox1.options[2]);
);
)();
</script>
</body>
</html>以上是关于js练习8 --- 事件处理程序表单脚本的主要内容，如果未能解决你的问题，请参考以下文章