# onblur

7개의 포스트
post-thumbnail

[TIL] 0622 | React with Redux, Next.js, TypeScript

✍🏻 0622 | React with Redux, Next.js, TypeScript ✓ 포커스를 잃은 리액트 ✓ 리팩토링 및 State 파생

2022년 6월 22일
·
0개의 댓글
·

[TIL] onFocus, onBlur

이번 프로젝트에서 파파고 API를 통해 번역할 수 있는 번역 기능을 넣었는데, 번역할 문장을 인자로 보낼 때 어떻게 해야할지 고민이 있었다. onChange로 하기에는 입력하는 동안 계속 리렌더링이 되는 문제가 있고, ref로 하려고 하니 번역할 문장 입력하는 곳에 내

2022년 5월 19일
·
0개의 댓글
·
post-thumbnail

[React] onFocus 와 onBlur이벤트를 사용하여 인풋창 색상 변경하기

로그인 페이지를 만드는 중 구현하기로 한 필수사항 중 인풋창을 클릭했을 때 밑줄 색이 바뀌고 인풋 바깥인 메인페이지를 다시 클릭했을 때 원래 색상으로 돌아오게 하는 기능이 있었다. 인풋창을 클릭할때마다 이벤트가 발생하는 토글 기능이 아닌 활성화된 기능을 다시 해제시켜야

2021년 12월 4일
·
0개의 댓글
·
post-thumbnail

내외부 구분, onBlur on react

next@10.1.3react@17.0.3Focus관련해서 일반적으로 js에서는 focusin, focusout이벤트가 있고 별도로 blur관련이벤트가 있다. 하지만 react에서는 onFocus, onBlur 두가지만 있다. 따라서 포커스가 떠남을 표현하고자 할 때는

2021년 7월 2일
·
0개의 댓글
·
post-thumbnail

Calling onBlur and mutating state can onClick not to fire

리액트에는 focus를 위한 이벤트가 onFocus, onBlur 두 종류가 있다. 이 때 onBlur가 다른 이벤트를 먹어서 다른 이벤트가 fire되지 않는 경우가 있다.이에 대한 해결방법으로는 releatedTarget을 활용한 방법이 있다.만약 먹히는 이벤트가 클

2021년 5월 7일
·
0개의 댓글
·

[TIL] 2020/11/14

Today, I Learned const { matches } = window.matchMedia('(max-width: 48rem)'); 이 코드를 통해서 만약 웹으로 접속하면, 즉, max-width설정을 통해, 48rem 이하인 디바이스에서 접속하면(m

2020년 11월 14일
·
0개의 댓글
·

How to control focus/onblur in Vue TextareaAutosize library

focus나 onblur속성이 어디서든 다 먹는줄 알고 <div>태그에서도 적용될 줄 알았다. 그러나 onblur 나 focus는 '입력요소'(ex.input)에만 적용되는 것이다.Vue.js로 현재 프론트페이지를 만들고 있는데 특정한 곳 외에 다른 곳을 클릭했을

2020년 2월 14일
·
0개의 댓글
·