CATEGORIES
제이쿼리를 사용하여 특정 엘리먼트에서 포커스 아웃이 되었을때 이벤트를 발생시키는 방법을 알아봅니다.focusout(function() { // code })# Focusout 이벤트란먼저 포커스아웃에 대하여 알아봅니다. 이 이벤트는 특정 엘리먼트가 선택된 경우에 해당 엘리먼트를 벋어나는 경우 focus out이 발생하여 이벤트를 동작시키도록 합니다.! 웹사이트에서 언제 사용되는가?만약 웹사이트를 구축하는 경우라면 아래의 경우에 포커스 아웃 이벤트가 많이 사용됩니다.- 검색을 위한 input 태그 포커스 아웃되면 사라지도록 만들기그렇다면 자세한 예제를 아래에서 알아보시기 바랍니다.# 제이쿼리 focusout() 예제보기그렇다면 검색 기능을 아래에 만들어보겠습니다. 만약 검색 버튼을 누르면 입력할 수 있는 in
Last Modified : 2018-02-01 16:04:02자바스크립트를 사용하여 만약 특정한 영역 및 엘리먼트의 위치로 스크롤을 위치하려면 어떻게 해야할까요? 예를들어 회원가입을 원할 경우 입력폼이 보이는 곳으로 스크롤을 위치하는 방법이 필요합니다. 이때 가능한 방법은 아래처럼 세 가지를 생각해볼 수 있습니다.i. #id를 a 태그 링크로 사용(Anchor 사용방법)ii. focus() 이벤트를 사용하는 방법은iii. scrollIntoView() 메소드를 사용하는 방법은# 자바스크립트 원하는 위치로 스크롤 이동하는 방법만약 아래와 같은 input 태그가 존재하는 경우를 예로 들어보겠습니다.<input type="text" id="nickname" />i. 하이퍼링크에 #id를 사용하기만약 입력폼이 아래와 같이 nickname 이라는 id 속성을 갖는다면 다음과
Last Modified : 2019-08-12 22:18:45특정 DOM 요소가 방문자에 의하여 활성화 중인지 알아낼 수 있는 방법은 무엇일까요? 예를들어 어떤 아이디를 입력하는 input 태그가 현재 focus 되고 있는지 알아내는 방법은 없을까요?# document.activeElement 사용하기만약 어떤 요소가 현재 사용자에 의하여 포커스 되었는지 알고 이를 확인할 경우 document.activeElement를 사용합니다. 예를들어 닉네임을 얻기 위하여 input 태그를 제공하는 경우 사용자가 input에 입력 또는 포커스 중인지 확인이 가능합니다.document.activeElement 속성은 현재 포커스 중인 DOM 요소를 찾아 반환하여 줍니다. 즉 input에 입력중인 경우 input 태그가 반환됩니다.<span>닉네임을 입력하세요!</span><in
Last Modified : 2017-09-21 00:24:43CSS 선택자 :focus-within에 대하여 알아봅니다. 언제 어떻게 사용할까요?# CSS 선택자 :focus-widthinCSS 선택자 중 :focus-within이 존재합니다. :focus-within은 폼 엘리먼트에 사용하며 방문자의 포커스된 엘리먼트에 스타일을 부여할 수 있는 매우 유용한 선택자입니다. 특징으로는 부모 요소에 사용하면 내부 자식 요소에 포커스 된 경우까지 스타일을 쉽게 적용됩니다.element:focus-in { color: red; }사용 방법은 다른 선택자 방식과 동일합니다. 엘리먼트에 추가하고 원하는 속성 값을 추가하면 됩니다. 그럼 아래는 간단한 예제를 만들어 보겠습니다.! :focus-within 예제보기그럼 간단한 예제를 만들어보고 해당 엘리먼트에 포커스 할 경우 어떻게
Last Modified : 2019-08-23 08:57:20CKEDITOR를 로딩한 후 바로 포커스가 이동하기 위한 방법은 무엇일까요?# 에디터 로딩 후 포커스하는 방법CKEDITOR.instances.editor.on('instanceReady', function(event) { CKEDITOR.instances.editor.focus();});위 코드를 실행할 경우 에디터가 활성화... 준비된 경우 포커스가 이동하게 됩니다.
Last Modified : 2017-04-18 08:45:26
React 앱에서 antd의 Input 컴포넌트를 사용하고 있을 경우 만약 특정 시점에 Input 컴포넌트에 focus 되어 커서가 위치하게 하려고 합니다. 예를들어 검색 버튼을 클릭하는 경우 검색 Input 컴포넌트에 커서가 focus되어 타이핑이 바로 가능하도록 구현하려고 합니다. 어떻게 하면 될까요?먼저 실패한 케이스를 알아봅니다. 순수 자바스크립트로 DOM에 접근하여 input 태그에 focus() 메소드를 동작해보았습니다. 에러는 발생하지 않지만 정상적으로 focus 되지 않아 다른 방법이 필요했습니다.# antd Input에서 focus 사용하기결과적으로 react에서 refs를 사용하여 엘리먼트에 접근하는 방법을 사용하였습니다. 즉, Input에 ref prop 정보를 추가한 후에 createR
Last Modified : 2020-12-13 08:57:12