placeholder 검색 결과

해당 글 4건

Placeholder 포커스시 감추기

HTML5의 placeholder 속성은 input 요소와 textarea 요소에 알맞은 힌트를 제공하는 목적으로 사용됩니다. 다만, 브라우저별로 해당 요소에 포커스가 될때 작동하는 방식에서 차이점이 발생합니다. 이를 하나로 통일하는 방법에 대해서 설명합니다. IE처럼 포커스시 감추기 IE에서는 input 요소에 포커스를 받으면 placeholder 글자가 바로 사라지지만 다른 브라우저들은 포커스를 받고 글자를 실제로 입력해야 placeholder 글자가 사라진다. 이것을 IE와 같은 방식으로 통일되도록 구현해보자. 참고 : How do I auto-hide placeholder text upon focus using css or jquery? 위의 링크의 내용을 정리하면 아래와 같이 css를 삽입함으로..
웹코딩/CSS 2015. 5. 23. 12:00

In-Field Labels jQuery Plugin - 폼힌트 크로스브라우징

타임머신을 타고 과거로 돌아가는 심정으로 placeholder 속성을 대체하는 또 다른 방법을 소개합니다. placeholder 속성이 지원되지 않았던 과거에는 label 요소를 이용해 힌트를 제공하기도 했습니다. 비록 그 사용목적이 스펙에 맞지 않을지라도... In-Field Labels jQuery Plugin 소개 필드 안쪽에 label 요소를 지원하는 형태로 올바른 형식의 HTML 폼을 만드는 간단한 플러그인이다. label 요소에 포커스가 맞춰지면 글자가 흐릿해지고 글자 입력이 시작되면 사라진다. 필드를 지우고 포커스를 잃으면 다시 글자가 나타난다. HOME In-Field Labels jQuery Plugin REPO https://github.com/dcneiner/In-Field-Label..
웹개발론/크로스브라우징 2015. 5. 22. 17:00

Placeholders.js - 폼힌트 크로스브라우징

IE9 이하에서 placeholder 속성 적용을 위한 대체방안 두번째 글입니다. Placeholders.js 소개 HTML5 placeholder 속성을 위한 자바스크립트 폴리필이다. 가볍고 모든 브라우저에서 사용가능하다. HOME http://jamesallardice.github.io/Placeholders.js REPO https://github.com/jamesallardice/Placeholders.js input 요소와 textarea 요소에 적용된다. 브라우저의 기본적인(native)스타일을 렌더링하도록 노력하며, 스타일을 수정 가능하도록 placeholdersjs 라는 클래스를 추가한다. 기본적으로 placeholder 속성을 지원하는 브라우저에는 영향을 미치지 않는다. IE6+ 이상에서..
웹개발론/크로스브라우징 2015. 5. 22. 15:00

HTML5 Placeholder jQuery Plugin - 폼힌트 크로스브라우징

HTML5에 새로 추가된 속성인 placeholder라는 속성을 이용하여 input 요소에 힌트를 제공할 수 있습니다. IE9 이하에서는 제대로 작동하지 않기 때문에 이를 극복하기 위해서 몇가지 대체방안을 살펴봅니다. 그 중 첫번째 글입니다. HTML5 Placeholder jQuery Plugin 소개 IE9 이하 버전에서 placeholder를 구현하기 위해 jQuery로 만든 플러그인이다. REPO https://github.com/mathiasbynens/jquery-placeholder DEMO Demo & Examples HTML5 Placeholder jQuery Plugin 사용법 HTML에서 사용할 폼 컨트롤을 생성한다. jQuery 라이브러리와 HTML5 Placeholder jQuer..
웹개발론/크로스브라우징 2015. 5. 22. 12:00