HTML5는 요소에 placeholder속성을 도입하여 input회색으로 표시된 기본 텍스트를 표시 할 수 있습니다.
슬프게도 IE 9를 포함한 Internet Explorer는이를 지원하지 않습니다.
자리 표시 자 시뮬레이터 스크립트가 이미 있습니다. 일반적으로 기본 텍스트를 입력 필드에 넣고 회색을 표시하고 입력 필드에 초점을 맞추 자마자 다시 제거하여 작동합니다.
이 방법의 단점은 자리 표시 자 텍스트가 입력 필드에 있다는 것입니다. 그러므로:
자리 표시 자 텍스트가 입력 자체에없는 솔루션을 원합니다.
답변:
"웹 양식 : 입력 자리"보고에서의 섹션 HTML5 크로스 브라우저 Polyfills , 하나의 I 톱이었다 jQuery를 - HTML5-자리 .
IE9로 데모를 시도해 보니 <input>스팬으로 감싸고 자리 표시 자 텍스트로 레이블을 오버레이하는 것처럼 보입니다 .
<label>Text:
<span style="position: relative;">
<input id="placeholder1314588474481" name="text" maxLength="6" type="text" placeholder="Hi Mom">
<label style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="placeholder1314588474481">Hi Mom</label>
</span>
</label>다른 심도 있지만, 나는 그것들을 모두 보지 않았습니다. 그중 하나 인 Placeholders.js 는 자신을 "종속성이 없음 (따라서 대부분의 자리 표시 자 폴리 필 스크립트와 달리 jQuery를 포함 할 필요가 없음")로 광고합니다.
편집 : "어떻게" "어떻게"에 관심이있는 사람들 을 위해, 이것을 수행하는 jQuery 플러그인을 만드는 과정을 안내하는 고급 HTML5 자리 표시 자 폴리 필 을 만드는 방법.
또한 Firefox 및 Chrome과 다른 IE10에서 자리 표시 자 텍스트가 포커스에서 사라지는 방법에 대한 설명 은 IE10에서 자리 표시 자 유지를 참조하십시오 . 이 문제에 대한 해결책이 있는지 확실하지 않습니다.
내 경험 중 가장 좋은 것은 https://github.com/mathiasbynens/jquery-placeholder ( html5please.com 권장 )입니다. http://afarkas.github.com/webshim/demos/index.html 은 훨씬 광범위한 폴리 필 라이브러리 중에서도 좋은 솔루션을 제공합니다.
jQuery 구현을 사용하면 제출할 때 기본값을 쉽게 제거 할 수 있습니다. 아래는 예입니다.
$('#submit').click(function(){
var text = this.attr('placeholder');
var inputvalue = this.val(); // you need to collect this anyways
if (text === inputvalue) inputvalue = "";
// $.ajax(... // do your ajax thing here
});나는 당신이 오버레이를 찾고 있다는 것을 알고 있지만, 당신은이 경로의 용이성을 선호 할 것입니다 (이제 위에서 쓴 것을 알고 있습니다). 그렇다면 내 프로젝트를 위해 이것을 작성했으며 실제로 훌륭하게 작동하며 (jQuery 필요) 전체 사이트에 구현하는 데 몇 분 정도 걸립니다. 처음에는 회색 텍스트, 초점이 맞으면 밝은 회색, 입력 할 때 검은 색을 제공합니다. 또한 입력 필드가 비어있을 때마다 자리 표시 자 텍스트를 제공합니다.
먼저 양식을 설정하고 입력 태그에 자리 표시 자 속성을 포함시킵니다.
<input placeholder="enter your email here">이 코드를 복사하여 placeholder.js로 저장하십시오.
(function( $ ){
$.fn.placeHolder = function() {
var input = this;
var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field
if (text) input.val(text).css({ color:'grey' });
input.focus(function(){
if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.blur(function(){
if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' });
});
input.keyup(function(){
if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.mouseup(function(){
if (input.val() === text) input.selectRange(0,0);
});
};
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) { this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
})( jQuery );하나의 입력에만 사용하려면
$('#myinput').placeHolder(); // just one브라우저가 HTML5 자리 표시 자 속성을 지원하지 않는 경우 사이트의 모든 입력 필드에 구현하는 것이 좋습니다.
var placeholder = 'placeholder' in document.createElement('input');
if (!placeholder) {
$.getScript("../js/placeholder.js", function() {
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
});
} IE에서 몇 가지 제안을 시도하고 문제를 본 후에는 다음과 같이 작동합니다.
https://github.com/parndt/jquery-html5-placeholder-shim/
내가 좋아하는 것-당신은 단지 js 파일을 포함합니다. 시작할 필요가 없습니다.
다음 솔루션은 자리 표시 자 속성을 사용하여 입력 텍스트 요소에 바인딩합니다. IE에 대해서만 자리 표시 자 동작을 에뮬레이트하고 제출되지 않은 경우 제출시 입력 값 필드를 지 웁니다.
이 스크립트를 추가하면 IE는 HTML5 자리 표시자를 지원하는 것 같습니다.
$(function() {
//Run this script only for IE
if (navigator.appName === "Microsoft Internet Explorer") {
$("input[type=text]").each(function() {
var p;
// Run this script only for input field with placeholder attribute
if (p = $(this).attr('placeholder')) {
// Input field's value attribute gets the placeholder value.
$(this).val(p);
$(this).css('color', 'gray');
// On selecting the field, if value is the same as placeholder, it should become blank
$(this).focus(function() {
if (p === $(this).val()) {
return $(this).val('');
}
});
// On exiting field, if value is blank, it should be assigned the value of placeholder
$(this).blur(function() {
if ($(this).val() === '') {
return $(this).val(p);
}
});
}
});
$("input[type=password]").each(function() {
var e_id, p;
if (p = $(this).attr('placeholder')) {
e_id = $(this).attr('id');
// change input type so that the text is displayed
document.getElementById(e_id).type = 'text';
$(this).val(p);
$(this).focus(function() {
// change input type so that password is not displayed
document.getElementById(e_id).type = 'password';
if (p === $(this).val()) {
return $(this).val('');
}
});
$(this).blur(function() {
if ($(this).val() === '') {
document.getElementById(e_id).type = 'text';
$(this).val(p);
}
});
}
});
$('form').submit(function() {
//Interrupt submission to blank out input fields with placeholder values
$("input[type=text]").each(function() {
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
$("input[type=password]").each(function() {
if ($(this).val() === $(this).attr('placeholder')) {
$(this).val('');
}
});
});
}
});이 방법을 사용하여 매우 간단한 해결책을 찾았습니다.
http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
jquery 해킹이며 내 프로젝트에서 완벽하게 작동했습니다.
이처럼 간단합니다.
$(function() {
...
var element = $("#selecter")
if(element.val() === element.attr("placeholder"){
element.text("").select().blur();
}
...
});이 문제를 해결하기 위해 jquery 플러그인을 작성했습니다. 무료입니다.
JQuery 디렉토리 :
사용자 정의 색상을 허용하고 초점을 맞출 때 입력을 지우는 다른 동작을 사용하는 간단한 자리 표시 자 JQuery 스크립트를 생각해 냈습니다. Firefox 및 Chrome의 기본 자리 표시자를 대체하고 IE8에 대한 지원을 추가합니다.
// placeholder script IE8, Chrome, Firefox
// usage: <input type="text" placeholder="some str" />
$(function () {
var textColor = '#777777'; //custom color
$('[placeholder]').each(function() {
(this).attr('tooltip', $(this).attr('placeholder')); //buffer
if ($(this).val() === '' || $(this).val() === $(this).attr('placeholder')) {
$(this).css('color', textColor).css('font-style','italic');
$(this).val($(this).attr('placeholder')); //IE8 compatibility
}
$(this).attr('placeholder',''); //disable default behavior
$(this).on('focus', function() {
if ($(this).val() === $(this).attr('tooltip')) {
$(this).val('');
}
});
$(this).on('keydown', function() {
$(this).css('font-style','normal').css('color','#000');
});
$(this).on('blur', function() {
if ($(this).val() === '') {
$(this).val($(this).attr('tooltip')).css('color', textColor).css('font-style','italic');
}
});
});
});자리 표시 자 는 내가 작성한 초경량 드롭 인 플레이스 홀더 jQuery polyfill입니다. 1KB 미만으로 축소되었습니다.
이 라이브러리가 두 가지 우려 사항을 모두 해결하도록했습니다.
Placeholdr 는 Placeholdr의 결과로 텍스트가 입력 필드에있을 때 예기치 않은 리턴 값을 방지하기 위해 jQuery $ .fn.val () 함수 를 확장합니다 . 따라서 필드 값에 액세스하기 위해 jQuery API를 고수하면 항목을 변경할 필요가 없습니다.
플레이스 홀더는 양식 제출을 청취하고 필드에서 플레이스 홀더 텍스트를 제거하여 서버가 단순히 빈 값을 볼 수 있도록합니다.
또한 Placeholdr의 목표는 자리 표시 자 문제에 간단한 드롭 인 솔루션을 제공하는 것입니다. 플레이스 홀더 지원에 관심이 있으시면 Github에 알려주십시오.
플러그인을 삽입하고 즉, 완벽하게 작동하는지 확인하려면 jquery.placeholder.js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
// To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
// $.fn.hide = function() { return this; }
// Then uncomment the last rule in the <style> element (in the <head>).
$(function() {
// Invoke the plugin
$('input, textarea').placeholder({customClass:'my-placeholder'});
// That’s it, really.
// Now display a message if the browser supports placeholder natively
var html;
if ($.fn.placeholder.input && $.fn.placeholder.textarea) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> and <code>textarea</code> elements.</strong> The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)';
} else if ($.fn.placeholder.input) {
html = '<strong>Your current browser natively supports <code>placeholder</code> for <code>input</code> elements, but not for <code>textarea</code> elements.</strong> The plugin will only do its thang on the <code>textarea</code>s.';
}
if (html) {
$('<p class="note">' + html + '</p>').insertAfter('form');
}
});
</script>다음은 IE 8 이하의 자리 표시자를 만드는 순수한 자바 스크립트 함수 (jquery 필요 없음)이며 암호에서도 작동합니다. HTML5 자리 표시 자 특성을 읽고 양식 요소 뒤에 span 요소를 만들고 양식 요소 배경을 투명하게 만듭니다.
/* Function to add placeholders to form elements on IE 8 and below */
function add_placeholders(fm) {
for (var e = 0; e < document.fm.elements.length; e++) {
if (fm.elements[e].placeholder != undefined &&
document.createElement("input").placeholder == undefined) { // IE 8 and below
fm.elements[e].style.background = "transparent";
var el = document.createElement("span");
el.innerHTML = fm.elements[e].placeholder;
el.style.position = "absolute";
el.style.padding = "2px;";
el.style.zIndex = "-1";
el.style.color = "#999999";
fm.elements[e].parentNode.insertBefore(el, fm.elements[e]);
fm.elements[e].onfocus = function() {
this.style.background = "yellow";
}
fm.elements[e].onblur = function() {
if (this.value == "") this.style.background = "transparent";
else this.style.background = "white";
}
}
}
}
add_placeholders(document.getElementById('fm'))<form id="fm">
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<textarea name="description" placeholder="Description"></textarea>
</form>참고 :이 polyfill의 저자는 그것이 상상할 수있는 거의 모든 브라우저에서 작동한다고 주장하지만 IE11에는 해당되지 않는 의견에 따르면 IE11은 대부분의 최신 브라우저와 마찬가지로 기본 지원을 제공합니다
Placeholders.js 는 내가 본 최고의 자리 표시 자 폴리 필입니다.
기존 shim이 자리 표시 자에 포커스를 두지 않아 사용자 경험이 저하되고 Firefox, Chrome 및 Safari가 처리하는 방식과 일치하지 않는다는 좌절감을 느끼고 나만의 jQuery 플러그인을 만들었습니다. 페이지 나 팝업이 처음로드 될 때 입력에 초점을 맞추고 텍스트가 입력 될 때까지 자리 표시자를 계속 표시하려는 경우 특히 그렇습니다.