CSS 또는 jQuery를 사용하여 포커스를 잡을 때 자리 표시 자 텍스트를 자동으로 숨기려면 어떻게합니까?


213

이것은 Chrome을 제외한 모든 브라우저에서 자동으로 수행됩니다 .

Chrome 을 구체적으로 타겟팅해야한다고 생각 합니다.

어떤 솔루션?

하지와 만약 CSS , 다음과 jQuery를 ?

친절합니다.


cehck 내 편집 다음 도움이 될 수도 있습니다
Toni Michel Caubet

Opera는 또한 포커스에서 자리 표시자를 제거하는 또 다른 브라우저입니다.
Lucas

버전 15부터 Firefox는 입력을 시작할 때까지 더 이상 자리 표시 자 텍스트를 제거하지 않습니다. IE10의 경우도 마찬가지이지만 그 방법을 확인할 방법이 없습니다.
Rob Fletcher

1
네이티브 브라우저 동작을 수정하지 않아도된다는 사실을 아무도 언급하지 않을까 걱정됩니다. 나는 자리 표시자가 계속 존재하는 것을 선호한다. 그것은 최종 사용자로서 나를 도울 수 있으며 브라우저에서 구현하기 시작한 기능입니다. 아마도 포커스에서 사라짐 동작이 유용성 문제로 판명 되었기 때문일 것입니다. 브라우저를 알려주세요.
Ryan Wheale

"Chrome을 제외한 모든 브라우저에서 자동으로 수행됩니다." 더 이상? 방금 Firefox 37.0.2, Safari 7.1.5 및 Chrome 42.0의 OSX에서 이것을 시도했습니다. 입력을 시작할 때까지 자리 표시 자 텍스트를 제거하지 않으며 필드를 지울 때 모두 다시 넣습니다.
Nathan Long

답변:


261
<input 
type="text" 
placeholder="enter your text" 
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />

2
이렇게하면 필드에서 멀어지면 클릭하면 비워집니다.
LondonGuy

2
@LondonGuy : 방금 게시물을 수정했습니다. 원하는대로 작동하는지 확인하십시오. 그러나 Toni Michel Caubet 솔루션이 더
좋습니다

9
여기서 문제는 이것이 명백한 JavaScript입니다. Toni Michel Caubet의 솔루션이 더 좋습니다.
Silkster

나는 그것을 좋아하지만 불행히도 IE 나 Safari 모두 작동하지 않습니다.
모하메드 무스타파


455

편집 : 모든 브라우저는 이제 지원

input:focus::placeholder {
  color: transparent;
}
<input type="text" placeholder="Type something here!">

Firefox 15 및 IE 10 이상에서도 지원합니다. Casey Chu의 CSS 솔루션 을 확장하려면 다음을 수행하십시오.

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

1
좋은 대답입니다! HTML5에 찬성하여 이전 jQuery 솔루션을 포기한 다음 이해가되지 않고 JavaScript를 수정 사항으로 다시 추가하십시오. 이것은 내가 찾고있는 해결책 일뿐입니다.
nienn

@MartinHunt FF에서 이것을 시도 했습니까? 입력 : 초점 ::-moz-placeholder
Philip

16
낡은 스레드를 준설하지만 더 완벽하게 만들기위한 사과 : input : focus : -moz-placeholder는 Firefox 18 이하, 19 이상에서는 다음을 사용해야합니다. input : focus ::-moz-placeholder (note 이중 콜론). 참조 : css-tricks.com/snippets/css/style-placeholder-text
Peter Lewis

이 의견은 승리입니다. 너무 검도 같은 동적 컨트롤 작품
reflog

1
나도 큰 대답! 필드가 비활성화되어있을 때이 기능이 필요할 수도있는 사람들에게는 CSS 코드가 있습니다. / * 보류 필드가 비활성화 된 경우 자리 표시 자 텍스트 (있는 경우) 숨기기 * / input : disabled ::-webkit-input- 자리 표시 자 {색상 : 투명; } 입력 : 비활성화 : -moz-placeholder {color : transparent; } 입력 : 비활성화 ::-moz-placeholder {color : transparent; } 입력 : 비활성화 : -ms- 입력-자리 표시 자 {color : transparent; }
Ramanagom

74

다음은 CSS 전용 솔루션입니다 (현재로서는 WebKit에서만 작동합니다).

input:focus::-webkit-input-placeholder {
    opacity: 0;
}

1
나는이 답변을 좋아하지만 이것에 대한 브라우저 지원은 아직 없습니다.
Jerry

44

순수 CSS 솔루션 (JS 필요 없음)

@Hexodus 및 @Casey Chu의 답변을 바탕으로 CSS 불투명도 및 전환을 활용하여 자리 표시 자 텍스트를 페이드 아웃하는 업데이트 된 크로스 브라우저 솔루션이 있습니다. 그것은 포함 자리, 사용할 수있는 모든 요소의 작동 textareainput태그를.

::-webkit-input-placeholder { opacity: 1; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome <=56, Safari < 10 */
:-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 1; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 1; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 1; transition: opacity .5s; } /* Modern Browsers */

*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome <=56, Safari < 10 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */

편집 : 최신 브라우저를 지원하도록 업데이트되었습니다.


6
최고의 CSS 솔루션!
Fatih SARI 2016 년

좋은 오래된 CSS ... 훌륭한 간단한 솔루션! 왜 그렇게 생각하지 않았습니까?
JI-Web

40

자리 표시 자 attr을 사용해 보셨습니까?

<input id ="myID" type="text" placeholder="enter your text " />

-편집하다-

알겠습니다, 다음 시도하십시오 :

$(function () {

    $('#myId').data('holder', $('#myId').attr('placeholder'));

    $('#myId').focusin(function () {
        $(this).attr('placeholder', '');
    });
    $('#myId').focusout(function () {
        $(this).attr('placeholder', $(this).data('holder'));
    });


});

테스트 : http://jsfiddle.net/mPLFf/4/

-편집하다-

실제로 자리 표시자는 입력 이름이 아닌 값을 설명하는 데 사용되어야합니다. 나는 다음 대안을 제안한다

html :

<label class="overlabel"> 
    <span>First Name</span>
    <input name="first_name" type="text" />
</label>

자바 스크립트 :

$('.overlabel').each(function () {
    var $this = $(this);
    var field = $this.find('[type=text], [type=file], [type=email], [type=password], textarea');
    var span = $(this).find('> span');
    var onBlur = function () {
        if ($.trim(field.val()) == '') {
            field.val('');
            span.fadeIn(100);
        } else {
            span.fadeTo(100, 0);
        }
    };
    field.focus(function () {
        span.fadeOut(100);
    }).blur(onBlur);
    onBlur();
});

CSS :

.overlabel {
  border: 0.1em solid;
  color: #aaa;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-height: 2.2em;
}
.overlabel span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlabel span, .overlabel input {
  text-align: left;
  font-size: 1em;
  line-height: 2em;
  padding: 0 0.5em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none; /* prevent ios styling */
  border-width: 0;
  width: 100%;
  outline: 0;
}

테스트:

http://jsfiddle.net/kwynwrcf/


사용중인 데이터 속성을 볼 수 있습니다. 그러나 나는 CSS에 상응하는 것을 볼 것이다. 캐시되면 더 빠른 솔루션이 될 것이며 글로벌 일 수 있습니다. 위는 필요한 모든 요소에 데이터 속성을 배치해야합니다. (아래 답변)
Neil

1
이것은 너무 복잡하다. 훨씬 적은 코드로 수행 할 수 있습니다.
JGallardo

(하지만 난 당신이 3 개 가지 솔루션이 있다는 것을 보았다 있는지 확실하지 않습니다) 나에게 빛을 보여 @JGallardo
토니 미셸 Caubet

19

@ casey-chu와 pirate rob의 답변을 늘리기 위해 더 크로스 브라우저 호환 방법이 있습니다.

    /* WebKit browsers */
input:focus::-webkit-input-placeholder { color:transparent; }

    /* Mozilla Firefox 4 to 18 */
input:focus:-moz-placeholder { color:transparent; }

    /* Mozilla Firefox 19+ */
input:focus::-moz-placeholder { color:transparent; }

    /* Internet Explorer 10+ */
input:focus:-ms-input-placeholder { color:transparent; }

정확히 내가 지금 쓴 것 (대신 내가 사용했습니다 opacity:0;)! 가능한 모든 브라우저를 지원하는이 스레드의 유일한 CSS 솔루션!
ReynekeVosz

11

Toni의 대답은 좋지만 모든 입력 이 동작 을 얻는 방식 으로을 삭제 ID하고 명시 적으로 사용 하고 싶습니다 .inputplaceholder

<input type="text" placeholder="your text" />

참고 $(function(){ });를위한 속기이다 $(document).ready(function(){ });:

$(function(){
    $('input').data('holder',$('input').attr('placeholder'));
    $('input').focusin(function(){
        $(this).attr('placeholder','');
    });
    $('input').focusout(function(){
        $(this).attr('placeholder',$(this).data('holder'));
    });
})

데모.


3
필드가 둘 이상인 경우 작동하지 않습니다. 다음은 코드의 개선 된 버전입니다. jsfiddle.net/6CzRq/64
svlada

10

나는 이것을 네임 스페이스에 패키징하고 "placeholder"속성을 가진 요소에서 실행하고 싶습니다 ...

$("[placeholder]").togglePlaceholder();

$.fn.togglePlaceholder = function() {
    return this.each(function() {
        $(this)
        .data("holder", $(this).attr("placeholder"))
        .focusin(function(){
            $(this).attr('placeholder','');
        })
        .focusout(function(){
            $(this).attr('placeholder',$(this).data('holder'));
        });
    });
};

5

귀하의 스타일이 가장 강력한 요소로 적용되도록하기 위해 때때로 사양 이 필요 id합니다. @Rob Fletcher에게 감사합니다.

따라서 앱 컨테이너의 ID로 접두사를 추가하는 것을 고려하십시오.

    #app input:focus::-webkit-input-placeholder, #app  textarea:focus::-webkit-input-placeholder {
        color: #FFFFFF;
    }

    #app input:focus:-moz-placeholder, #app textarea:focus:-moz-placeholder {
        color: #FFFFFF;
    }


5

Pure CSS를 사용하면 저에게 효과적이었습니다. 입력 / 입력시 투명하게하십시오.

 input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: transparent !important;
 }
 input:focus::-moz-placeholder { /* Firefox 19+ */
   color: transparent !important;
 }
 input:focus:-ms-input-placeholder { /* IE 10+ */
   color: transparent !important;
 }
 input:focus:-moz-placeholder { /* Firefox 18- */
   color: transparent !important;
  }

4

Wallace Sidhrée 의 코드 샘플 을 더 세분화하려면 :

$(function()
{  
      $('input').focusin(function()
      {
        input = $(this);
        input.data('place-holder-text', input.attr('placeholder'))
        input.attr('placeholder', '');
      });

      $('input').focusout(function()
      {
          input = $(this);
          input.attr('placeholder', input.data('place-holder-text'));
      });
})

이를 통해 각 입력은 데이터 속성에 올바른 자리 표시 자 텍스트를 저장합니다.

jsFiddle실제 예제를 참조하십시오 .


4

나는 전환으로 매운 CSS 접근법을 좋아합니다. 포커스에서 자리 표시자가 사라집니다.;) 텍스트 영역에서도 작동합니다.

좋은 아이디어를 주신 @Casey Chu에게 감사드립니다.

textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { 
    color: #fff;
    opacity: 0.4;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s; 
}

textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder  { 
    opacity: 0;
}

4

http://bourbon.io/ 와 함께 SCSS를 사용하면 이 솔루션은 간단하고 우아하며 모든 웹 브라우저에서 작동합니다.

input:focus {
  @include placeholder() {
    color: transparent;
  }
}

버번을 사용하십시오! 당신에게 좋습니다!


3

이 CSS 조각은 저에게 효과적이었습니다.

input:focus::-webkit-input-placeholder {
        color:transparent;

}

1
그것은 JQuery없이하는 좋은 방법입니다 :)
tehX

3

순수한 CSS 기반 솔루션의 경우 :

input:focus::-webkit-input-placeholder  {color:transparent;}
input:focus::-moz-placeholder   {color:transparent;}
input:-moz-placeholder   {color:transparent;}

참고 : 아직 모든 브라우저 공급 업체에서 지원하지는 않습니다.

참조 : Ilia Raiskin의 CSS를 사용 하여 자리 표시 자 텍스트를 숨길 수 있습니다.


2

HTML :

<input type="text" name="name" placeholder="enter your text" id="myInput" />

jQuery :

$('#myInput').focus(function(){
  $(this).attr('placeholder','');
});
$('#myInput').focusout(function(){
  $(this).attr('placeholder','enter your text');
});

1
이것은 하나의 입력 만 가정합니다.
nym

2

2018> JQUERY v.3.3 솔루션 : 자리 표시자가있는 모든 입력, 텍스트 영역에 대해 전역 적으로 작업합니다.

 $(function(){
     $('input, textarea').on('focus', function(){
        if($(this).attr('placeholder')){
           window.oldph = $(this).attr('placeholder');
            $(this).attr('placeholder', ' ');
        };
     });

     $('input, textarea').on('blur', function(){
       if($(this).attr('placeholder')){
            $(this).attr('placeholder', window.oldph);
         };
     }); 
});

1

데모는 여기 있습니다 : jsfiddle

이 시도 :

//auto-hide-placeholder-text-upon-focus
if(!$.browser.webkit){
$("input").each(
        function(){
            $(this).data('holder',$(this).attr('placeholder'));
            $(this).focusin(function(){
                $(this).attr('placeholder','');
            });
            $(this).focusout(function(){
                $(this).attr('placeholder',$(this).data('holder'));
            });

        });

}

플레이스 홀더 속성이있는 필드 만 선택하려면 $ ( "input [placeholder]")를 사용하십시오.
Silkster

이것은 가장 좋은 대답이며 간단하며 초점이 맞지 않을 때 다른 사람을 선택 해제합니다.
JGallardo

1

입력 용

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

텍스트 영역

textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }

1
$("input[placeholder]").focusin(function () {
    $(this).data('place-holder-text', $(this).attr('placeholder')).attr('placeholder', '');
})
.focusout(function () {
    $(this).attr('placeholder', $(this).data('place-holder-text'));
});

1
$("input[placeholder]").each(function () {
    $(this).attr("data-placeholder", this.placeholder);

    $(this).bind("focus", function () {
        this.placeholder = '';
    });
    $(this).bind("blur", function () {
        this.placeholder = $(this).attr("data-placeholder");
    });
});

0

위의 모든 것 외에도 두 가지 아이디어가 있습니다.

palceholder를 모방하는 요소를 추가 할 수 있습니다. 그런 다음 javascript를 사용하여 표시하거나 숨기는 요소를 제어합니다.

그러나 너무 복잡해서 다른 하나는 형제의 CSS 선택기를 사용하고 있습니다.

.placeholder { position: absolute; font-size: 14px; left: 40px; top: 11px; line-height: 1; pointer-events: none; }
.send-message input:focus + .placeholder { display: none; } 

23333, 영어가 잘못되었습니다. 문제를 해결하십시오.


URL을 확인 하여 콘텐츠 품질을 높이는 것이 좋습니다.
Willie Cheng

0

이 기능을 사용해보십시오 :

+ PlaceHolder의 초점을 숨기고 다시 흐리게 표시합니다.

+이 기능은 자리 표시 자 선택기에 따라 달라집니다. 먼저 자리 표시 자 특성이있는 요소를 선택하고 초점을 맞추고 흐리게 처리하는 기능을 트리거합니다.

포커스 : 자리 표시 자 속성에서 값을 가져 오는 요소에 속성 "데이터 텍스트"를 추가 한 다음 자리 표시 자 속성의 값을 제거합니다.

on blur : 자리 표시 자 값을 반환하고 data-text 속성에서 제거합니다.

<input type="text" placeholder="Username" />
$('[placeholder]').focus(function() {
    $(this).attr('data-text', $(this).attr('placeholder'));
    $(this).attr('placeholder', '');
  }).blur(function() {
      $(this).attr('placeholder', $(this).attr('data-text'));
      $(this).attr('data-text', '');
  });
});

입력 요소를 검사하여 장면 뒤에서 일어나는 일을 보면 나를 잘 따라갈 수 있습니다.


0

각도 5에 적용한 것과 동일합니다.

자리 표시자를 저장하기 위해 새 문자열을 만들었습니다.

newPlaceholder:string;

입력 상자에 포커스 및 블러 기능을 사용했습니다 (자동 완성 기능을 사용하고 있습니다).

위 자리 표시자는 typescript에서 설정되고 있습니다.

내가 사용하는 두 가지 기능-

/* Event fired on focus to textbox*/
Focus(data) {
    this.newPlaceholder = data.target.placeholder;
    this.placeholder = '';
}
/* Event fired on mouse out*/
Blur(data) {
    this.placeholder = this.newPlaceholder;
}

0

CSS 나 JQuery를 사용할 필요가 없습니다. HTML 입력 태그에서 바로 할 수 있습니다.

예를 들어 아래 이메일 상자에서 내부를 클릭하면 자리 표시 자 텍스트가 사라지고 외부를 클릭하면 텍스트가 다시 나타납니다.

<input type="email" placeholder="Type your email here..." onfocus="this.placeholder=''" onblur="this.placeholder='Type your email here...'">

-1
/* Webkit */
[placeholder]:focus::-webkit-input-placeholder { opacity: 0; }
/* Firefox < 19 */
[placeholder]:focus:-moz-placeholder { opacity: 0; }
/* Firefox > 19 */
[placeholder]:focus::-moz-placeholder { opacity: 0; }
/* Internet Explorer 10 */
[placeholder]:focus:-ms-input-placeholder { opacity: 0; }

이 답변은 이전 답변과 동일합니다. 추가하거나 개선해야 할 것이 있으면 원래 답변을 수정하십시오.
JonathanDavidArndt
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.