Add class to an input when its focused, and remove it when isnt focused-CodePudding

I'm trying to add the class ".contact__form-input--focused" to the input that is focused from a form.

I'm trying to do that adding an event listener to every input, and then if it has the class already delete that class from the classlist.

//INPUT ANIMATION
const input = document.querySelectorAll("contact__form-input");

function addClass(input) {
  input.classList.add("contact__form-input--focused");
}

function removeClass(input) {
  input.classList.remove("contact__form-input--focused");
}

for (let i = 0; i < input.length; i  ) {
  if (item[i].classList.contains("contact__form-input--focused")) {
    item.addEventListener("focus", addClass(input[i]));
  } else {
    item.addEventListener("blur", removeClass(input[i]));
  }
}

.contact__form {
  display: flex;
  flex-direction: column;
}

.contact__form-input {
  border: none;
  border-bottom: .1rem solid rgba(0, 0, 0, .12);
  font-size: var(--medium-font-size);
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}

.contact__form-input--focused {
  /*some animations here*/
}

<form  method="POST">
  <label >
            <span>Name</span>
            <input  name="Name" type="text" autocomplete="name" required>
          </label>
  <label >
            <span>Phone number</span>
            <input  name="Phone number" type="tel" autocomplete="tel" required>
          </label>
  <label >
            <span>Message</span>
            <input  type="text" required>
          </label>
  <button >Send</button>
</form>

CodePudding user response：

if your using JS like this and not just the pseudo of :focus you can do it by

const inputs = document.querySelectorAll("contact__form-input");
inputs.forEach(input => {
    input.addEventListener("focus", function(){
        this.classList.add("contact__form-input--focused");
    });
    input.addEventListener("blur", function(){
        this.classList.remove("contact__form-input--focused");
    });
});

Or if you want to switch the classes

const inputs = document.querySelectorAll("contact__form-input");
function switchInputClasses(){
    this.classList.toggle("contact__form-input");
    this.classList.toggle("contact__form-input--focused");
}
inputs.forEach(input => {
    input.addEventListener("focus", switchInputClasses);
    input.addEventListener("blur", switchInputClasses);
});

The reason for functions declarations and not ()=>{} is because the latter will preserve scope and to set up the this keyword correctly you need the scopes to be changed, the best way to think of it is an EventListner is called via apply() on the element

The pseudo method is just change your CSS to be

.contact__form {
  display: flex;
  flex-direction: column;
}

.contact__form-input {
  border: none;
  border-bottom: .1rem solid rgba(0, 0, 0, .12);
  font-size: var(--medium-font-size);
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}

.contact__form-input:focus {
  /*some animations here*/
}

CodePudding user response：

1) You are not getting the HTML elements because contact__form-input is a class and you have to tell querySelectorAll that you are looking for all elements whose class is contact__form-input by appending . before className

const inputs = document.querySelectorAll( ".contact__form-input" );

2) You should add eventListener on focus or blur as:

inputs.forEach(input => {
  input.addEventListener("focus", () => addClass(input))
  input.addEventListener("blur", () => removeClass(input))
})

NOTE: For demo purpose I've added thick red border

//INPUT ANIMATION
const inputs = document.querySelectorAll(".contact__form-input");

function addClass(input) {
  input.classList.add("contact__form-input--focused");
}

function removeClass(input) {
  input.classList.remove("contact__form-input--focused");
}

console.log(inputs)

inputs.forEach(input => {
  input.addEventListener("focus", () => addClass(input))
  input.addEventListener("blur", () => removeClass(input))
})

.contact__form {
  display: flex;
  flex-direction: column;
}

.contact__form-input {
  border: none;
  border-bottom: .1rem solid rgba(0, 0, 0, .12);
  font-size: var(--medium-font-size);
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}

.contact__form-input--focused {
  /*some animations here*/
  border: 5px solid red;
}

<form  method="POST">
  <label >
            <span>Name</span>
            <input  name="Name" type="text" autocomplete="name" required>
          </label>
  <label >
            <span>Phone number</span>
            <input  name="Phone number" type="tel" autocomplete="tel" required>
          </label>
  <label >
            <span>Message</span>
            <input  type="text" required>
          </label>
  <button >Send</button>
</form>

CodePudding user response：

You don't need the if statement. Just add both event listeners to all the inputs.

The 2nd argument to addEventListener() must be a function. You're calling the function immediately, not when the event happens.

//INPUT ANIMATION
const input = document.querySelectorAll(".contact__form-input");

function addClass(input) {
  input.classList.add("contact__form-input--focused");
}

function removeClass(input) {
  input.classList.remove("contact__form-input--focused");
}

for (let i = 0; i < input.length; i  ) {
  let item = input[i];
  item.addEventListener("focus", () => addClass(item));
  item.addEventListener("blur", () => removeClass(item));
}

.contact__form {
  display: flex;
  flex-direction: column;
}

.contact__form-input {
  border: none;
  border-bottom: .1rem solid rgba(0, 0, 0, .12);
  font-size: var(--medium-font-size);
  margin: 0;
  padding: 4px 0;
  width: 100%;
  background: 0 0;
  text-align: left;
  color: inherit;
}

.contact__form-input--focused {
  background-color: yellow;
}

<form  method="POST">
  <label >
            <span>Name</span>
            <input  name="Name" type="text" autocomplete="name" required>
          </label>
  <label >
            <span>Phone number</span>
            <input  name="Phone number" type="tel" autocomplete="tel" required>
          </label>
  <label >
            <span>Message</span>
            <input  type="text" required>
          </label>
  <button >Send</button>
</form>

CodePudding user response：

<style type="text/css">
    .contact__form {
        display: flex;
        flex-direction: column;
    }
    .contact__form-input {
        border: none;
        border-bottom: .1rem solid rgba(0, 0, 0, .12);
        font-size: var(--medium-font-size);
        margin: 0;
        padding: 4px 0;
        width: 100%;
        background: 0 0;
        text-align: left;
        color: inherit;
    }

    .contact__form-input--focused {
        /*some animations here*/
    }
</style>

<form  method="POST">
    <label >
        <span>Name</span>
        <input  name="Name" type="text" autocomplete="name">
    </label>
    <label >
        <span>Phone number</span>
        <input  name="Phone" type="tel" autocomplete="tel" required>
    </label>
    <label >
        <span>Message</span>
        <input  name="Text" type="Text" required>
    </label>
    <button >Send</button>
</form>

<script>
    const inputName = document.querySelector("input[name=Name]");
    const inputPhone = document.querySelector("input[name=Phone]");
    const inputText = document.querySelector("input[name=Text]");
    inputName.addEventListener("focus", function() {
        if(inputName.classList.contains("contact__form-input--focused"))
            inputName.classList.remove("contact__form-input--focused");
        else
            inputName.classList.add("contact__form-input--focused");
    });
    inputPhone.addEventListener("focus", function() {
        if(inputPhone.classList.contains("contact__form-input--focused"))
            inputPhone.classList.remove("contact__form-input--focused");
        else
            inputPhone.classList.add("contact__form-input--focused");
    });
    inputText.addEventListener("focus", function() {
        if(inputText.classList.contains("contact__form-input--focused"))
            inputText.classList.remove("contact__form-input--focused");
        else
            inputText.classList.add("contact__form-input--focused");
    });
</script>