이것은 Chrome을 제외한 모든 브라우저에서 자동으로 수행됩니다 .
Chrome 을 구체적으로 타겟팅해야한다고 생각 합니다.
어떤 솔루션?
하지와 만약 CSS , 다음과 jQuery를 ?
친절합니다.
이것은 Chrome을 제외한 모든 브라우저에서 자동으로 수행됩니다 .
Chrome 을 구체적으로 타겟팅해야한다고 생각 합니다.
어떤 솔루션?
하지와 만약 CSS , 다음과 jQuery를 ?
친절합니다.
답변:
<input
type="text"
placeholder="enter your text"
onfocus="this.placeholder = ''"
onblur="this.placeholder = 'enter your text'" />
편집 : 모든 브라우저는 이제 지원
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+ */
@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 */
편집 : 최신 브라우저를 지원하도록 업데이트되었습니다.
자리 표시 자 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;
}
테스트:
@ 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 솔루션!
Toni의 대답은 좋지만 모든 입력 이 동작 을 얻는 방식 으로을 삭제 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"속성을 가진 요소에서 실행하고 싶습니다 ...
$("[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'));
});
})
이를 통해 각 입력은 데이터 속성에 올바른 자리 표시 자 텍스트를 저장합니다.
나는 전환으로 매운 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;
}
http://bourbon.io/ 와 함께 SCSS를 사용하면 이 솔루션은 간단하고 우아하며 모든 웹 브라우저에서 작동합니다.
input:focus {
@include placeholder() {
color: transparent;
}
}
버번을 사용하십시오! 당신에게 좋습니다!
순수한 CSS 기반 솔루션의 경우 :
input:focus::-webkit-input-placeholder {color:transparent;}
input:focus::-moz-placeholder {color:transparent;}
input:-moz-placeholder {color:transparent;}
참고 : 아직 모든 브라우저 공급 업체에서 지원하지는 않습니다.
참조 : Ilia Raiskin의 CSS를 사용 하여 자리 표시 자 텍스트를 숨길 수 있습니다.
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);
};
});
});
데모는 여기 있습니다 : 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'));
});
});
}
위의 모든 것 외에도 두 가지 아이디어가 있습니다.
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, 영어가 잘못되었습니다. 문제를 해결하십시오.
이 기능을 사용해보십시오 :
+ 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', '');
});
});
입력 요소를 검사하여 장면 뒤에서 일어나는 일을 보면 나를 잘 따라갈 수 있습니다.
각도 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;
}
/* 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; }