css 또는 jquery를 사용하여 포커스 시 자리 표시자 텍스트를 자동으로 숨기려면 어떻게 해야 합니까?

css 또는 jquery를 사용하여 포커스 시 자리 표시자 텍스트를 자동으로 숨기려면 어떻게 해야 합니까?

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

크롬을 목표로 삼아야 할 것 같습니다.

해결책이 있습니까?

CSS를 사용하지 않으면 jQuery를 사용합니까?

편집: 모든 브라우저가 지금 지원됩니다.

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+ */

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

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

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

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

@Hexodus와 @Casey Chu의 답변을 기반으로, 여기 CSS 불투명도와 전환을 활용하여 자리 표시자 텍스트를 페이드아웃하는 업데이트된 크로스 브라우저 솔루션이 있습니다.다음을 포함하여 자리 표시자를 사용할 수 있는 모든 요소에 대해 작동합니다.textarea그리고.input꼬리표

::-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 */

<div>
  <div><label for="a">Input:</label></div>
  <input id="a" type="text" placeholder="CSS native fade out this placeholder text on click/focus" size="60">
</div>

<br>

<div>
  <div><label for="b">Textarea:</label></div>
  <textarea id="b" placeholder="CSS native fade out this placeholder text on click/focus" rows="3"></textarea>
</div>

수정사항

• 편집 1(2017):최신 브라우저를 지원하도록 업데이트되었습니다.
• 편집 2(2020):실행 가능한 스택 조각을 추가했습니다.

자리 표시자 특성을 시도해 보셨습니까?

<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>

Javascript:

$('.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/

@casey-chu와 해적 롭의 답변을 강화하기 위해 브라우저 간 호환성이 더 높은 방법은 다음과 같습니다.

    /* 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; }

토니의 대답은 좋지만, 나는 차라리 포기하고 싶습니다.ID그리고 명시적으로 사용합니다.input그런 식으로 모든 입력은placeholder다음 동작을 가져옵니다.

<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'));
    });
})

데모.

이름 공간에 이 파일을 패키지화하고 "자리 표시자" 특성을 가진 요소에서 실행합니다.

$("[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'));
        });
    });
};

때때로 당신은 당신의 스타일이 가장 강력한 요소로 적용되는지 확인하기 위해 특수성이 필요합니다.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;
    }

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;
  }

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의 작업 예제를 참조하십시오.

나는 전환이 가미된 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;
}

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

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

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

참조:Ilia Raiskin의 CSS로 포커스에 자리 표시자 텍스트를 숨깁니다.

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

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

부르봉을 쓰세요! 몸에 좋아요!

이 CSS 부분은 저에게 효과가 있었습니다.

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

}

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');
});

2018 > JQUERY v.3.3 SOLUTION: 모든 입력, 플레이스홀더가 있는 텍스트 영역에 대해 글로벌하게 작업합니다.

 $(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);
         };
     }); 
});

입력 배경색이 흰색인 경우, 입력 배경과 일치하도록 자리 표시자 텍스트 색상을 포커스에 설정하여 이론적으로 텍스트를 보이지 않게 할 수 있습니다.입력한 색상이 다른 경우에는 색상을 변경하기만 하면 됩니다.

input:focus::placeholder {
  color: white;
}

또한 색상을 다른 답변에 표시된 "투명"으로 설정할 수 있습니다.

모든 버전 각도 지정

.css 파일에 추가하기만 하면 됩니다.

.hide_placeholder:focus::placeholder {
  color: transparent;
}

그리고 수업시간에 당신의 입력에 사용합니다.

<input class="hide_placeholder"

데모가 있습니다. 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: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; }

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

$("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");
    });
});

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

자리 표시자를 모방하는 요소를 추가할 수 있습니다.그런 다음 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, 저는 영어를 잘 못합니다.당신의 문제가 해결되기를 바랍니다.

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

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

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

다음 기능을 사용해 보십시오.

+ 포커스 시 자리 표시자를 숨기고 블러 시 자리 표시자를 반환합니다.

+ 이 기능은 자리 표시자 선택기에 따라 달라집니다. 먼저 자리 표시자 속성을 가진 요소를 선택하고 포커스를 설정하고 흐리게 할 때 다른 요소를 설정합니다.

포커스: 플레이스홀더 속성에서 값을 가져오는 요소에 "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', '');
  });
});

입력 요소를 검사하여 배후에서 무슨 일이 일어나고 있는지 살펴보면 저를 매우 잘 따를 수 있습니다.

제가 앵글 5에 적용한 것과 같은 것입니다.

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

newPlaceholder:string;

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

위의 자리 표시자가 유형 스크립트에서 설정되고 있습니다.

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

/* 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;
}

/* 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; }

언급URL : https://stackoverflow.com/questions/9707021/how-do-i-auto-hide-placeholder-text-upon-focus-using-css-or-jquery