Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
To create a filter table with JavaScript, the code is as follows −Example Live Demo * { box-sizing: border-box; } .searchField { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } .birthDayTable { border-collapse: collapse; width: 100%; font-size: 18px; } .birthDayTable th, .birthDayTable td { text-align: left; padding: 12px; ... Read More
To create a filter list with JavaScript, the code is as follows −Example Live Demo * { box-sizing: border-box; } .searchInput { width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 2px solid grey; margin-bottom: 12px; } .animalUL { list-style-type: none; padding: 0; margin: 0; } .animalUL li a { border-top: 1px solid rgb(0, 0, 0); ... Read More
To add form validation for empty input fields with JavaScript, the code is as follows −Example Live Demo JavaScript empty input field validation example Name: Submit the form empty to see the validation performed function emptyValidation() { var formField = document.forms["Form1"]["firstName"].value; if (formField == "" || x == null) { alert("Name must be filled out"); return false; } } OutputThe above code will produce the following output −On submitting the form empty −
To turn off spell check for form elements, the code is as follows −Example Live Demo Disabling Spellcheck Example Your Name: About Yourself Type wrong spelling in the above input field to see spellcheck in action OutputThe above code will produce the following output −On typing something in the input fields −
To disable autocomplete of an input field, the code is as follows −Example Live Demo input{ font-size: 18px; padding: 10px; margin: 10px; border:1px solid grey; } Autocomplete on/off Example First name: Last name: Type in the above fields and refresh page to see autocomplete at work OutputThe above code will produce the following output −On typing something in the above fields after submitting the form one time −
To create autocompletion in a form, the code is as follows −Example Live Demo * { box-sizing: border-box; } body { margin: 10px; padding: 0px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .autocomplete { position: relative; display: inline-block; } input { border: none; background-color: #f1f1f1; padding: 10px; font-size: 16px; border-radius: 4px; } input[type="text"] { ... Read More
To create a form with multiple steps, the code is as follows −Example Live Demo * { box-sizing: border-box; } body { background-color: #f1f1f1; } #regForm { margin: 100px auto; font-family: Raleway; padding: 40px; width: 70%; min-width: 300px; } h1 { text-align: center; } input { padding: 10px; width: 100%; font-size: 17px; font-family:'Segoe ... Read More
To toggle between password visibility with JavaScript, the code is as follows −Example Live Demo Password visibility example Password: Show Password Click on the above checkbox to see your password as text document.querySelector(".check").addEventListener("click", showPass); function showPass() { var inputPassEle = document.getElementById("inputPass"); if (inputPassEle.type === "password") { inputPassEle.type = "text"; } else { inputPassEle.type = "password"; } } OutputThe above code will produce the following output −On checking the show password checkbox −
To trigger a button click on keyboard "enter" with JavaScript, the code is as follows −Example Live Demo Trigger Button Click on Enter Example Button Press the "Enter" key inside the above input field to trigger the button. var inputText = document.getElementById("inputField"); inputText.addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); document.getElementById("alertBtn").click(); } }); OutputThe above code will produce the following output −On typing something in the field and then pressing enter −
To find out if capslock is on inside an input field with JavaScript, the code is as follows −Example Live Demo #textBox { display: none; color: red; } Detecting Caps Lock Example Press caps lock in the above input field to check warning WARNING! Caps lock is ON. var input = document.querySelector(".inputfield"); var textBox = document.querySelector(".textBox"); input.addEventListener("keyup", event => { if (event.getModifierState("CapsLock")) { textBox.style.display = "block"; } else { textBox.style.display = "none"; } }); OutputThe above code will produce the following output −On typing something in the input field with capslock on −