通知顯示為帶有jQuery模式的輸入文本框單擊

Question

我不知道我能否很好地解釋我的問題，因為我是堆棧溢出的新手。 我已經閱讀了條款和條件，並盡了最大的努力來解釋我要完成的工作。 我希望你能理解我的要求。

我想使用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> 

Answer 1

一些技巧：

1. id在每個頁面中都是唯一的。 您不能僅使用一個id來定義多個元素。 相反，您應該使用class attribute`。

2. 幾秒鍾后要執行某些操作，則應使用setTimeout函數

3. 您必須了解jQuery選擇器及其一些功能。 閱讀網上的可用教程 。

4. 要驗證值，您必須了解正則表達式

您的問題的一個簡單的工作示例是這個。 希望能幫助到你

 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()" />