我正在使用动态形式。当我在第一个文本字段中输入我的姓名并按 Enter 时,会弹出下一个文本字段,请求我的电子邮件。但是,我可以多次单击输入,并且下一个文本字段不断弹出,我只想弹出一次。另一个问题是,如果我按两次 Enter 键,我的下一个请求我的电子邮件的文本字段会提交表单,我也想阻止这种情况。有什么解决办法吗?
Javascript
function addEvent(element, eventType, theFunction, capture) {
if (element.addEventListener) {
element.addEventListener(eventType, theFunction, capture);
}
else if (element.attachEvent) {
element.attachEvent("on" + eventType, theFunction);
}
}
function createEmailField() {
if ((window.event && window.event.keyCode == 13) || event.keyCode == 13) {
var name = document.getElementById("name").value;
if (name == "") {
window.alert("Mata in ditt namn");
}
else if (name.search(/^[A-Za-z]+$/) == -1) {
window.alert("Mata in ett namn med bokstäver");
}
else {
var newDiv = document.createElement("div");
var br = document.createElement("br");
newDiv.appendChild(br);
newDiv.appendChild(document.createTextNode("Hej " + name + "!"));
var br = document.createElement("br");
newDiv.appendChild(br);
newDiv.appendChild(document.createTextNode("Hur når vi dig?"));
var br = document.createElement("br");
newDiv.appendChild(br);
newDiv.appendChild(document.createTextNode("Epost:"));
var br = document.createElement("br");
newDiv.appendChild(br);
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("id", "email");
input.setAttribute("name", "email");
newDiv.appendChild(input);
var form = document.getElementById("form");
form.appendChild(newDiv);
var email = document.getElementById("email");
addEvent(email, "change", createTextArea, false);
}
}
}
function createTextArea() {
var email = document.getElementById("email").value;
if (email == "") {
alert("Mata in ditt email");
}
else if (email.search(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/) == -1) {
window.alert("Mata in ett korrekt email");
}
else {
var newDiv = document.createElement("div");
var br = document.createElement("br");
newDiv.appendChild(br);
newDiv.appendChild(document.createTextNode("Vad har du för fråga om vår verksamhet?"));
var br = document.createElement("br");
newDiv.appendChild(br);
var textArea = document.createElement("textArea");
textArea.setAttribute("id", "question");
textArea.setAttribute("name", "question");
textArea.cols = "30";
textArea.rows = "5";
newDiv.appendChild(textArea);
var br = document.createElement("br");
newDiv.appendChild(br);
newDiv.appendChild(document.createTextNode("Vi kommer att svara dig via: " + email));
var br = document.createElement("br");
newDiv.appendChild(br);
var button = document.createElement("input");
button.setAttribute("type", "submit");
button.setAttribute("value", "Skicka");
button.setAttribute("name", "Skicka");
button.setAttribute("id", "submit");
newDiv.appendChild(button);
var form = document.getElementById("form");
form.appendChild(newDiv);
}
}
function prevent(event) {
if ((window.event && window.event.keyCode == 13) || event.keyCode == 13) {
if (window.event) {
window.event.returnValue = false;
} else if (event.preventDefault) {
event.preventDefault();
}
}
}
function init() {
var name = document.getElementById("name");
addEvent(name, "keyup", createEmailField, false);
name.onkeypress = prevent;
}
window.onload = init;
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inl1-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="Uppg3.js" >
</script>
</head>
<body>
<h2> Frågeformulär </h2>
<form id="form" method="post" action="http://student.ts.mah.se/da123aht11/echoscript.php">
<div>
Vad heter du?...
<br /><input type="text" name="name" id="name" />
</div>
</form>
</body>
</html>