文本框不会改变 javascript 中的颜色
[英]the text-box does't change the color in javascript
问题描述
First, Happy New Year everyone!
首先祝大家新年快乐！
I tried make a Form in which the Check Boxes(text)at the start(calling a function, verif() ) where they must be in different color than as soon the user input a name the Colors must change in white, also I use the method, setCustomValidity to advice the user to fill the box in a case he(she) forgot but even I don't get the error massage where I must fill the box.我尝试制作一个表单，其中的复选框（文本）在开始时（调用函数， verif() ），其中它们的颜色必须与用户输入的名称不同，颜色必须更改为白色，我也使用方法setCustomValidity建议用户在他（她）忘记的情况下填充框，但即使我没有收到必须填充框的错误消息。 Unfortunately my plan looks has error but I don't know where is that.不幸的是，我的计划看起来有错误，但我不知道那是哪里。
<section id="secty">
<h1 id="demo">Managing Form</h1>
<form id="usuer_register" name="usuer_register" method="post">
<table>
<tr><td>Name:</td>
<td><input type="text" id="nam" name="nam"></td></tr>
<tr><td>Last name:</td>
<td><input type="text" id="name1" name="name1"></td></tr>
<tr><td>Age:</td>
<td><input type="text" id="age" name="age"></td></tr>
<tr><td><input type="submit" id="regist" name="regist"></td></tr>
</table>
</form>
</section>
<script>
function start(){
var x=document.getElementById("nam");
var y=document.getElementById("name1");
x.addEventListener("input", verif, false);
y.addEventListener("input", verif, false);
verif();
}
function verif(){
if(x.value=="" && y.value==""){
x.setCustomValidity("Enter Name or Lastname");
x.style.background="#803ADD";
y.style.background="#803ADD";
}
else{
x.setCustomValidity(""); // this restart as default;
x.style.background="#FFFFFF";
y.style.background="#FFFFFF";
}
}
window.addEventListener("load", start, false);
</script>
1 个解决方案
解决方案1
0 已采纳 2019-12-31 19:38:33
There's a bunch here to re-work.这里有一堆人要重新工作。 Check the HTML, CSS, and JavaScript comments in the code below for details, but the main point is that HTML, CSS, and JavaScript already provide most of the functionality you are looking for.查看下面代码中的 HTML、CSS 和 JavaScript 注释以获取详细信息，但重点是 HTML、CSS 和 JavaScript 已经提供了您正在寻找的大部分功能。 If you simply add required to the input elements that cannot be blank, you'll get automatic validity checking and styling.如果您只是将required添加到不能为空的input元素，您将获得自动有效性检查和样式。
Check our how HTML5 Form Validity works.查看我们的HTML5 表单有效性如何工作。
<!DOCTYPE html> <html> <head> <title>Form Validation</title> <style> /* CSS provides valid and invalid pseudo-classes which will automatically kick in based on the validity of form elements */ .validate:valid { background-color:#fff; } .validate:invalid { background-color:#803ADD; } label { display:inline-block; width: 5em; } form > div { margin-bottom: .2em; } </style> </head> <body> <section> <h1>Managing Form</h1> <!-- Don't forget to fill in the action attribute of the form! --> <form id="usuer_register" name="usuer_register" method="post" action=""> <!-- Do not use tables for layout! They are only for displaying tabular data. --> <div> <!-- Use label elements with form fields for better accessibility. Now, clicking on the label text focuses the field. Also, type="text" is not required on textboxes as "text" is the default type. Lastly, just add the "required" attribute for automatic validity checking. --> <label for="fName">Name: </label><input id="fName" name="fName" class="validate" required> </div> <div> <label for="lName">Last Name: </label><input id="lName" name="lName" class="validate" required> </div> <div> <label for="age">Age: </label><input id="age" name="age"> </div> <div> <!-- Submit Buttons shouldn't have a name because they don't have any data that you would want submitted along with the form. --> <input type="submit"> </div> </form> </section> <!-- As long as your script element is the last element in the body, there is no need for a "start" function or a "load" event hander. The following code will just run when it is reached and at this point in the document all the HTML has been parsed. --> <script> // Use meaningfull variable names let fName = document.getElementById("fName"); let lName = document.getElementById("lName") // The inputs will be invalid initially, so flag them // that way from the start fName.setCustomValidity("Enter First Name"); lName.setCustomValidity("Enter Last Name"); fName.addEventListener("input", verif); lName.addEventListener("input", verif); function verif(){ // The field has recieved input, so the required validation // requirement has been met. this.setCustomValidity(""); } </script> </body> </html>
Happy New Year!新年快乐！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.