重新归档占位符" Din Navn, Din email, Din besked"输入必要的文本，然后按"提交"发送"按钮。按钮，占位符内的文本保留。我试图让占位符中的文本回去显示原始文本(删除必要的文本我放在那里之前)，但我正在努力做到这一点。有没有一个快速的函数?
代码
const nameInput = document.querySelector("#name");
const email = document.querySelector("#email");
const message = document.querySelector("#message");
const success = document.querySelector("#success");
const errorNodes = document.querySelectorAll(".error");
function validateForm() {
clearMessage();
let errorFlag = false;
if (nameInput.value.length < 1) {
errorNodes[0].innerText = "Dette felt skal udfyldes";
nameInput.classList.add("error-border");
errorFlag = true;
}
if (!emailIsValid(email.value)) {
errorNodes[1].innerText = "Indtast venligst en gyldig email adresse";
email.classList.add("error-border");
errorFlag = true;
}
if (message.value.length < 1) {
errorNodes[2].innerText = "Dette felt skal udfyldes";
message.classList.add("error-border");
errorFlag = true;
}
if (!errorFlag) {
success.innerText = "Tak, din besked er modtaget";
} else {
success.innerText = "Udfyldt venligst felterne"
}
}
function clearMessage() {
for (let i = 0; i < errorNodes.length; i++) {
errorNodes[i].innerText = "";
}
nameInput.classList.remove("error-border");
email.classList.remove("error-border");
message.classList.remove("error-border");
}
function emailIsValid(email) {
let pattern = /S+@S+.S+/;
return pattern.test(email);
}<div id="overlay">
<form onsubmit="event.preventDefault(); validateForm()" class="formtilgrid">
<h2>Kontakt Schneider Electric</h2>
<label for="name">Navn:</label>
<input type="text" id="name" placeholder="Dit navn">
<small class="error"></small>
<label for="email">Email:</label>
<input type="text" id="email" placeholder="Din email">
<small class="error"></small>
<label for="message">Besked:</label>
<textarea id="message" placeholder="Din besked" rows="6"></textarea>
<small class="error"></small>
<div id="center">
<input type="submit" value="Send besked">
<p id="success"></p>
</div>
</form>
</div>试试这个，我添加了一个function deleteValue();来检测点击提交按钮，一旦function被触发，所有原始输入框的值被设置为其原始占位符值一秒后从setTimeout();
const nameInput = document.querySelector("#name");
const email = document.querySelector("#email");
const message = document.querySelector("#message");
const success = document.querySelector("#success");
const errorNodes = document.querySelectorAll(".error");
function validateForm() {
clearMessage();
let errorFlag = false;
if (nameInput.value.length < 1) {
errorNodes[0].innerText = "Dette felt skal udfyldes";
nameInput.classList.add("error-border");
errorFlag = true;
}
if (!emailIsValid(email.value)) {
errorNodes[1].innerText = "Indtast venligst en gyldig email adresse";
email.classList.add("error-border");
errorFlag = true;
}
if (message.value.length < 1) {
errorNodes[2].innerText = "Dette felt skal udfyldes";
message.classList.add("error-border");
errorFlag = true;
}
if (!errorFlag) {
success.innerText = "Tak, din besked er modtaget";
} else {
success.innerText = "Udfyldt venligst felterne"
}
}
function clearMessage() {
for (let i = 0; i < errorNodes.length; i++) {
errorNodes[i].innerText = "";
}
nameInput.classList.remove("error-border");
email.classList.remove("error-border");
message.classList.remove("error-border");
}
function emailIsValid(email) {
let pattern = /S+@S+.S+/;
return pattern.test(email);
}
function deleteValue() {
setTimeout(function click(){
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("message").value = "";
}, 1000)};
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id="overlay">
<form onsubmit="event.preventDefault(); validateForm()" class="formtilgrid">
<h2>Kontakt Schneider Electric</h2>
<label for="name">Navn:</label>
<input type="text" id="name" placeholder="Dit navn">
<small class="error"></small>
<label for="email">Email:</label>
<input type="text" id="email" placeholder="Din email">
<small class="error"></small>
<label for="message">Besked:</label>
<textarea id="message" placeholder="Din besked" rows="6"></textarea>
<small class="error"></small>
<div id="center">
<input onclick = "deleteValue();" id = "btn" type="submit" value="Send besked">
<p id="success"></p>
</div>
</form>
</div>
</body>
</html>希望这对你有用。