Wednesday

Use the enter key to submit <input> with javascript

6:24 AM css, html, javascript No comments

Issue

With my current program I am making a simple sign in form with the use of Javascript.

I have it set up but cant set up the text field to use the enter key as another way to submit the current input field. I am using Javascript to perform these functions but am unable to find the solution.

Here is my markup and code - index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/7781ca377a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./style.css" >
    <title>simple form</title>
</head>
<body>
<!-- icons by fontawesome.com -->
    <form>
        <div class="field-name">
            <i class="fa-solid fa-user"></i>
            <input type="text" placeholder="Username" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-email inactive">
            <i class="fa-solid fa-envelope"></i>
            <input type="email" placeholder="Email" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-password inactive">
            <i class="fa-solid fa-key"></i>
            <input type="password" placeholder="Password" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-finish inactive">
            <i class="fa-solid fa-heart"></i>
            <p>Thank you!</p>
            <i class="fa-solid fa-heart"></i>
        </div>
    </form>

    <script src="app.js"></script>
</body>
</html>

style.css:

* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    background-color: rgb(87, 189, 130);
    transition: background 0.5s ease;
    position: relative;
}

.field-name, .field-email, .field-password, .field-finish {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    height: 50px;
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.field-name i, .field-email i, .field-password i, .field-finish i {
    padding: 10px;
}

.field-name i:last-child, .field-email i:last-child, .field-password i:last-child, .field-finish i:last-child {
    padding: 10px;
    cursor: pointer;
}

.field-name input, .field-email input, .field-password input {
    background: none;
    border: none;
    flex: 1;
    height: 100%;
    outline: none;
}

div.inactive {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 50%);
}

div.active {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%);
}

@keyframes shake{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50%{
        transform: translate(-50%, -50%) rotate(10deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(0deg);
    }   
}

app.js:

function animatedForm() {
    const arrows = document.querySelectorAll('.fa-arrow-right');
    
    arrows.forEach(arrow => {
        arrow.addEventListener("click", () => {
            const input = arrow.previousElementSibling;
            const parent = arrow.parentElement;
            const nextForm = parent.nextElementSibling;

            //check for validation
            if(input.type === "text" && validateUser(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'email' && validateEmail(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'password' && validateUser(input)){
                nextSlide(parent, nextForm);
            } else {
                parent.style.animation = "shake 0.5s ease";
            };
            //animation reset
            parent.addEventListener('animationend', () => {
                parent.style.animation = "";
            });
        });
    });
    
}

//check if username or password has more than 6 characters 
function validateUser(user){
    if(user.value.length < 6){
        console.log('error not enough characters');
        error("rgb(189,87,87");
    } else {
        error("rgb(87, 189, 130");
        return true;
    }
}

//check if email is valid 
function validateEmail(email){
    const validation = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if(validation.test(email.value)){
        error("rgb(87, 189, 130");
        return true;
    } else {
        error("rgb(189,87,87");
    }
}

//change which input is active 
function nextSlide(parent, nextForm){
    parent.classList.add('inactive');
    parent.classList.remove('active');
    nextForm.classList.add('active');
}

//change background color if you fail to meet minimum requirements 
function error(color){
    document.body.style.backgroundColor = color;
}

//start
animatedForm();

i have atempted a plethora of resourses from external websites like https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp

and https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event

but i dont know after atempting the implement these resourses if they work or not.

Solution

You can add another event listener on keypress, and check if the keycode is 13(Enter key) if so apply your conditions, So your code will be like this:

function animatedForm() {
const arrows = document.querySelectorAll('.fa-arrow-right');
const inputs = document.getElementsByTagName("form")[0].querySelectorAll("input");

    inputs.forEach((input) => {
      input.addEventListener("keypress", (e) => {
        if (e.keyCode === 13) {
            const parent = input.parentElement;
            const nextForm = parent.nextElementSibling;

            //check for validation
            if(input.type === "text" && validateUser(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'email' && validateEmail(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'password' && validateUser(input)){
                nextSlide(parent, nextForm);
            } else {
                parent.style.animation = "shake 0.5s ease";
            };
            //animation reset
            parent.addEventListener('animationend', () => {
                parent.style.animation = "";
            });
        }
      });
    });
    
    arrows.forEach(arrow => {
        arrow.addEventListener("click", () => {
            const input = arrow.previousElementSibling;
            const parent = arrow.parentElement;
            const nextForm = parent.nextElementSibling;

            //check for validation
            if(input.type === "text" && validateUser(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'email' && validateEmail(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'password' && validateUser(input)){
                nextSlide(parent, nextForm);
            } else {
                parent.style.animation = "shake 0.5s ease";
            };
            //animation reset
            parent.addEventListener('animationend', () => {
                parent.style.animation = "";
            });
        });
    });
    
}

//check if username or password has more than 6 characters 
function validateUser(user){
    if(user.value.length < 6){
        console.log('error not enough characters');
        error("rgb(189,87,87");
    } else {
        error("rgb(87, 189, 130");
        return true;
    }
}

//check if email is valid 
function validateEmail(email){
    const validation = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if(validation.test(email.value)){
        error("rgb(87, 189, 130");
        return true;
    } else {
        error("rgb(189,87,87");
    }
}

//change which input is active 
function nextSlide(parent, nextForm){
    parent.classList.add('inactive');
    parent.classList.remove('active');
    nextForm.classList.add('active');
}

//change background color if you fail to meet minimum requirements 
function error(color){
    document.body.style.backgroundColor = color;
}

//start
animatedForm();

* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    background-color: rgb(87, 189, 130);
    transition: background 0.5s ease;
    position: relative;
}

.field-name, .field-email, .field-password, .field-finish {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    height: 50px;
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.field-name i, .field-email i, .field-password i, .field-finish i {
    padding: 10px;
}

.field-name i:last-child, .field-email i:last-child, .field-password i:last-child, .field-finish i:last-child {
    padding: 10px;
    cursor: pointer;
}

.field-name input, .field-email input, .field-password input {
    background: none;
    border: none;
    flex: 1;
    height: 100%;
    outline: none;
}

div.inactive {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 50%);
}

div.active {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%);
}

@keyframes shake{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50%{
        transform: translate(-50%, -50%) rotate(10deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(0deg);
    }   
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/7781ca377a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./style.css" >
    <title>simple form</title>
</head>
<body>
<!-- icons by fontawesome.com -->
    <form>
        <div class="field-name">
            <i class="fa-solid fa-user"></i>
            <input type="text" placeholder="Username" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-email inactive">
            <i class="fa-solid fa-envelope"></i>
            <input type="email" placeholder="Email" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-password inactive">
            <i class="fa-solid fa-key"></i>
            <input type="password" placeholder="Password" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-finish inactive">
            <i class="fa-solid fa-heart"></i>
            <p>Thank you!</p>
            <i class="fa-solid fa-heart"></i>
        </div>
    </form>

    <script src="app.js"></script>
</body>
</html>

Answered By - amel

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Wednesday

Use the enter key to submit <input> with javascript

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels