객체 배열, autocomplete 미작동, 이벤트 제어, input 디자인 제거

이번 시간에는 css, js를 둘 다 소개하고자 한다!
1. 객체 배열에서 특정 조건에 해당하는 요소 얻기
2. autocomplete="off"가 안 먹힐 때
3. safari에서 기본 input 디자인 제거하기
4. css로 이벤트 제어하기
이 들에 대해 알아보자~

1. 객체 배열에서 특정 정보 얻기

(1). 객체 배열이요?

• 객체 배열은 객체를 요소로 가지는 배열을 의미한다. ([{ }, { }, { }])

  const sample = [{id: 1, name: 'hello1'}, {id: 2, name: 'hello2'}];

그런데 이 객체 배열에서 조건에 해당하는 객체 요소를 가져올 수는 없을까? 당연히 있닭!🐥

(2). 조건에 해당하는 요소는 어떻게 가져오나요?

• 만약, 이름(name)이 sugan이라는 객체를 가져온다고 해보자!

  const people = [{name: 'sugan', age: 12}, {name: 'leesu', age: 35}, {name: 'sugan', age: 34}];

• js에서는 array.find()를 사용해 특정 조건에 해당하는 요소를 가져올 수 있다.

const result = people.find((person) => (person.name === "sugan"));
console.log(result);   //{name:"sugan",age:12}

(3). 조건에 해당하는 여러 요소를 어떻게 가져오나요?

• 앗, 그런데 해당 조건에 만족하는 여러 객체 요소를 가져오고 싶을 때가 있다.
• array.filter를 사용하여 특정 조건에 해당하는 요소를 다 가져올 수 있다~!

  const result = people.filter((person) => (person.name === "sugan"));
  console.log(result);   //[{name: 'sugan', age: 12}, {name: 'sugan', age: 34}]

2. autocomplete="off"가 안먹혀요

• autocomplete는 gif처럼 input에 자동으로 정보가 입력되는 기능이다.
• 로그인 화면의 경우 자동완성이 좋지만, 회원가입에서는 자동완성이 되선 안된다.

에이~ input에 autocomplete="off" 하면 되잖아요^0^

• 엥? 그런데 window환경의 크롬에서는 작동이 안되네요?;;
• 이를 해결할 수 있는 방법이 있다!
  

  

• 아래 코드는 유저명과 비밀번호를 적는 input이다.
• 먼저 form에 autocomplete="off"를 한다.

  <form autocomplete="off">
  <input id="username" type="text">
  <input id="password" type="password">
  </form>

• 그다음, 유저이름 input에는 autocomplete="nope"를 하고,
• 비밀번호 input에는 autocomplete="new-password"를 하는 방법이 있다 :)

  <form autocomplete="off">
  <input id="username" type="text" autocomplete="nope">
  <input id="password" type="password" autocomplete="new-password">
  </form>

3. safari에서 기본 input 디자인 제거하기

• safari, 태블릿 혹은 모바일의 경우에는 input에 기본 디자인이 적용되어 있다.
• 하지만 input에 새로운 디자인을 적용하려면, 기본 디자인을 해제해야 한다.
• 아래 코드와 같이 input에 2가지 속성을 추가하면 된다!

  input {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  appearance: none;
  border-radius: 0;
  }

4. css로 이벤트 제어하기

• js에서는 this.className을 이용해, 이벤트가 발생한 요소의 클래스명을 가져올 수 있다.

  <div id="click-area" class="red-orange">클릭하시오!</div>

  const area = document.getElementById('click-area');
  area.addEventListener("click", function() {
  console.log(this.className);                //red-orange
  })

  

하지만 만약 특정 요소의 이벤트 감지를 피하고 싶다면 어떻게 해야할까?

• css의 pointer-events를 사용하면 된다.
• 앞선 예시의 class="red-orange"에 pointer-events: none을 지정한다.
• 그러면 해당 요소를 클릭해도 이벤트가 발생하지 않는다 :)

  .red-orange {
  pointer-events: none;
  }

  

출처
아래 링크로 이동하면 더 자세히 알 수 있다고~?

• Check if object value exists within a Javascript array of objects
• Chrome ignores autocomplete=“off”
• github gist, autocomplete doesn' wotk
• zimmy327님의 포스팅, 사파리 input 스타일 제거
• 흉내쟁이님의 포스팅, css 이벤트 제어 속성