I don't know that I will explain my question well or not because I'm new on stack overflow. I've read the T&C and have tried my best to explain what I want to accomplish. I hope you understand what I'm asking.
我想使用 javascript 或 jQuery 创建一个系统，它将在浏览器窗口的顶部或底部显示一个弹出框，其中包含在我的 css 样式中定义的自定义文本和颜色。 “通知”会在文本框中告诉用户他们需要做什么，例如“写您的电子邮件”等。
这是向您展示我希望它们看起来像什么的代码:
<div class="warning"id="notification"><span>This is default message show first time</span></div>
<div class="information" id="notification"><span>Enter your registered Email ID</span></div>
<div class="error" id="notification"><span>Email ID is incorrect</span></div>
<div class="error" id="notification"><span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span></div>
<input type="text" name="email" id="username"/>
<input type="text" name="mobile" id="phone"/>
<input type="submit" id="ok" name="done"/>
<style>#notification {
position:fixed;
width: 100%;
text-align: center;
z-index:99;
overflow:hidden;
}
#notification h2{
font-size:16px;
font-weight:400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
.success,.warning,.error,.information{display: block; position: relative; padding:5px 20px}
.information{background-color:#3bafda}
.success{background-color:#8cc152}
.warning{background-color:#f6bb42}
.error{background-color:#e9573f}
.notify h2{color:#fff}</style>最佳答案
一些提示:
id在每个页面中都是唯一的。您不能只用一个id定义多个元素。相反，您应该使用classattribute`。要在几秒钟后做某事，你应该使用 setTimeout功能
您必须了解 jQuery 选择器及其一些功能。阅读可用 tutorials在网络上。
要验证一个值，您必须知道 Regex
你的问题的一个简单的工作示例是这样的。希望对你有帮助
let time2Hide = 5000;
function f(selector) {
$(selector).show();
setTimeout(() => {
$(selector).hide();
}, time2Hide);
}
f("#warning");
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function onSubmit() {
let email = $("#email").text()
if(!email) {
f("#information" )
}
else if(validateEmail(email)) {
f("#success");
}
else {
f("#error")
}
}/**********************************************/
/* notification styles */
.notification {
position: fixed;
width: 100%;
text-align: center;
z-index: 99;
overflow: hidden;
}
.notification h2 {
font-size: 16px;
font-weight: 400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
#success,
#warning,
#error,
#information {
display: none;
position: relative;
padding: 5px 20px
}
#information {
background-color: #3bafda
}
#success {
background-color: #8cc152
}
#warning {
background-color: #f6bb42
}
#error {
background-color: #e9573f
}
.notify h2 {
color: #fff
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="warning" class="notification">
<span>This is default message show first time</span>
</div>
<div id="information" class="notification">
<span>Enter your registered Email ID</span>
</div>
<div id="error" class="notification">
<span>Email ID is incorrect</span>
</div>
<div id="success" class="notification">
<span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span>
</div>
<hr><br><br><br>
<input type="email" name="email" id="username" />
<input type="phone" name="mobile" id="phone" />
<input type="submit" id="ok" name="done" onclick="onSubmit()"/>let time2Hide = 5000;
function hideAll() {
$("#error").hide();
$("#warning").hide();
$("#success").hide();
$("#information").hide();
}
function show(selector) {
hideAll();
$(selector).show();
}
function showNHide(selector) {
hideAll();
$(selector).show();
setTimeout(() => {
$(selector).hide(); show("#warning");
}, time2Hide);
}
$("#username")
.on("input click", () => {
show("#information");
})
.on("input", () => {
let email = $("#username").val();
if (!email) {
show("#information");
} else if (validateEmail(email)) {
showNHide("#success");
} else {
show("#error");
}
})
.on('focusout', () => {
show("#warning");
});
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
function onSubmit() {
let email = $("#username").val();
if (!email) {
show("#information");
} else if (validateEmail(email)) {
showNHide("#success");
} else {
show("#error");
}
}
show("#warning");/**********************************************/
/* notification styles */
.notification {
position: fixed;
width: 100%;
text-align: center;
z-index: 99;
overflow: hidden;
}
.notification h2 {
font-size: 16px;
font-weight: 400
}
/*#notification.showNote{
width:50%;
left:230px
}*/
/*error, info, notice, alert*/
#success,
#warning,
#error,
#information {
display: none;
position: relative;
padding: 5px 20px
}
#information {
background-color: #3bafda
}
#success {
background-color: #8cc152
}
#warning {
background-color: #f6bb42
}
#error {
background-color: #e9573f
}
.notify h2 {
color: #fff
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="warning" class="notification">
<span>This is default message show first time</span>
</div>
<div id="information" class="notification">
<span>Enter your registered Email ID</span>
</div>
<div id="error" class="notification">
<span>Email ID is incorrect</span>
</div>
<div id="success" class="notification">
<span>Email is correct - good : show me for 5 sec only after I will hide automatically if I am in green else show until cursor inside textbox.</span>
</div>
<hr><br><br><br>
<input type="email" name="email" id="username" />
<input type="phone" name="mobile" id="phone" />
<input type="submit" id="ok" name="done" onclick="onSubmit()" />关于javascript - 通知显示为输入文本框单击 jquery 模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52133759/