# input
.png?w=120)
focus/onblur 처리
focus나 onblur속성이 어디서든 다 먹는줄 알고 <div>태그에서도 적용될 줄 알았다. 그러나 onblur 나 focus는 '입력요소'(ex.input)에만 적용되는 것이다.Vue.js로 현재 프론트페이지를 만들고 있는데 특정한 곳 외에 다른 곳을 클릭했을
[React] state를 이용해 <div>태그와 <input>태그 toggle구현
누군가에게는 간단한 문제가 누군가에게는 매우 어려운 문제로 다가올 때가 있다. 아래 사진에서 보드, 투두, 태스크 부분을 클릭하면 내용을 수정할 수 있는 input 창으로 변경하고 변경완료 후 다시 내용을 보여 싶은데 어떻게 해야할 지에 대해 생각이 나지 않았다. (보드수정, 투두, 태스크 부분) image.png 여러가지 참고문서를 읽어보고 고민을 해...
[React] input창 수정 후 안에 있는 글자 없애기
input 창의 value값 넣고 value값으로 state값을 넣고 setState로 state값을 ''으로 변경 클라이언트 기능을 구현하면서 서버는 데이터를 회원정보 수정페이지에서 기능을 구현하는 중 정보수정 요청을 보낸 뒤에도 아래 사진과 같이 input 값이 그대로 남아있는 문제가 발생하였다. image.png 회원정보 수정과 요청을 하는 클라...
input 입력 시 한글만 입력하게 하고 싶을 때[JS]
입력 폼 개발 시 사용자가 input에 한글만 적게 하고 싶을 때가 있다. 처음엔 이런식으로 하면 될 줄 알았지만 크롬에선 정상 작동되는데 IE에서는 정상적으로 작동하지 않았다 (망할 IE 망했으면...); 그때 여러 구글링을 통해 알아본 결과 숫자나 영어는 123, abc 이렇게 적히는 반면 한글은 ㄱ ㅏ ㅁ 을 합쳐서 감으로 만들어야 하기 때문...
React에서 <input>을 쓸 때 주의할 것
참고: 크롬에서 테스트한 결과로 디테일한 현상은 타 브라우저와 다를 수 있습니다. 그리고 테스트 코드는 typescript 기반으로 제작되었는데, 인자 값을 any 타입으로 정의한 것은 테스트 코드를 간소화하기 위한 것으로 실제로는 타입에 맞게 지정해 주어야합니다. 1. jsx 태그에 등록하는 이벤트 리스너는 네이티브 이벤트가 아니다. jsx 태그에 on...
input 태그의 다양한 속성값
input 태그에는 다양한 속성들이 존재하는데요 바로 한번 살펴볼까요 readonly - 해당 필드를 읽기 전용으로 바꿉니다. 텍스트 필드나 텍스트 영역처럼 필드 안에 내용이 있으면서 사용자에게 내용을 보여주기만 하고, 사용자가 입력은 할 수 없게 하는 속성입니다. readonly 는 불값을 가지기 때문에 true 또는 false 값을 지정해도 되고...