IE8 및 9에서 자리 표시 자 특성을 지원하는 방법


132

작은 문제 placeholder가 있습니다 .IE 8-9에서 입력 상자 의 속성이 지원되지 않습니다.

내 프로젝트 (ASP Net)에서이를 지원하는 가장 좋은 방법은 무엇입니까? jQuery를 사용하고 있습니다. 다른 외부 도구를 사용해야합니까?

http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html는 좋은 솔루션?


7
Pedant 's corner : 태그가 아닌 속성입니다. 태그에는 주위에 뾰족한 괄호가 있습니다 (예 :) <input>. 속성은 괄호 안의 키-값 쌍입니다 (예 :) placeholder="This is an attribute value". 같은 질문을하는 미래의 사람들이 찾을 수 있도록 질문을 그대로 둡니다.
Paul D. Waite

2
그 링크는 그대로 작동하지 않았습니다. $ ( "[placeholder]") 선택기 주위의 추가 인용 부호를 제거했는데 문제가 없었습니다.
claptimes

1
해당 링크의 솔루션은 웹킷의 기본 지원에 따라 비밀번호 상자도 처리하지 않습니다.
geedubb

1
귀하가 제공 한 링크는 실제로 잘 작동합니다. 암호와는 별개로 작동하며 설정이 더 간단 할 수 없습니다.
Hobailey 11/15/13

1
링크는 대대적 인 수정입니다
Pixelomo

답변:


89

이 jQuery 플러그인을 사용할 수 있습니다 : https://github.com/mathiasbynens/jquery-placeholder

그러나 귀하의 링크도 좋은 해결책 인 것 같습니다.


2
질문에서 제안 된 링크가 저에게 효과가 없었습니다. 양식 제출에 문제가있었습니다. 이 답변에서 제안한 솔루션은 훨씬 더 강력 해 보이며 치료를 받았습니다.
Jonny White

실제로 나는 이것을 시도했지만 정상적으로 작동하지만 양식과 암호 필드가있는 라이트 박스를로드하자마자 모든 것이 작동하지만 암호 필드는 작동하지 않습니다-그냥 비어 있습니다.
주릭

6
내 IE8 암호 자리 표시 자에 점이 있습니다
Mladen Janjetovic

나는 또한 ie8에서 그것을 볼 수 없습니다. 나는 ie8에있을 때 필드 위에 텍스트를 표시하여 문제를 해결했습니다.
jhawes

jQuery-placeholder는 다르게 동작합니다. 사용자가 자리 표시 자에 대한 Firefox의 일반적인 동작과 같이 필드에 무언가를 입력하기 시작할 때 대신 초점에서 자리 표시자를 제거합니다.
supertonsky

89

다음 폴리 필 중 하나를 사용할 수 있습니다.

이 스크립트는 placeholder속성을 지원하지 않는 브라우저 에서 속성에 대한 지원을 추가 하며 jQuery가 필요하지 않습니다!


4
jquery가 아닌 솔루션이라는 아이디어를 좋아하기 때문에 이것을 찬성했지만 지금은이 코드에 IE8에 문제가 있으므로 나에게 적합하지 않습니다. github.com/jamesallardice/Placeholders.js/issues/17
Dan Searle

3
이 솔루션은 비밀번호 상자를 처리하지 않습니다
Jurik

2
@Jurik 추가 polyfill을 추가했습니다-도움이되기를 바랍니다.
starbeamrainbowlabs

1
이 플러그인의 배포자 조차도이
Jurik

암호 필드는 여전히 iE8에서 작동하지 않습니다. 허용 된 답변 링크는 암호 필드에 대해 ie8에서 작동하는 것 같습니다.
수지

24

$ .Browser.msie은 당신이 사용하는이 ... 더 이상 최신 JQuery와에없는 $의 .support을

아래처럼 :

 <script>

     (function ($) {
         $.support.placeholder = ('placeholder' in document.createElement('input'));
     })(jQuery);


     //fix for IE7 and IE8
     $(function () {
         if (!$.support.placeholder) {
             $("[placeholder]").focus(function () {
                 if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
             }).blur(function () {
                 if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
             }).blur();

             $("[placeholder]").parents("form").submit(function () {
                 $(this).find('[placeholder]').each(function() {
                     if ($(this).val() == $(this).attr("placeholder")) {
                         $(this).val("");
                     }
                 });
             });
         }
     });
 </script>

2
이것은 매력처럼 작동합니다. 플러그인을 추가하는 것보다 낫습니다. 고마워요
LemonCool

@vsync 아니요 잘 읽으면 플러그인, 복수, 옵션 대부분이 몇 줄과 몇 줄의 코드로 여러 파일을 사용해야한다고 말했습니다. 당신은 약간 오만하지 않으며, 그 의견은 어떻게 대답을 향상
시키는가

실제로 사용해서는 안됩니다. 이것은 jQuery 내부 용이며 언제든지 제거 할 수 있습니다. api.jquery.com/category/deprecated/deprecated-1.9
Will

3

jquery를 사용하면 다음과 같이 할 수 있습니다. 이 사이트 에서 Jquery를 사용하는 자리 표시 자

$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

이들은 대체 링크입니다

  1. 자리 표시 자 jquery 라이브러리
  2. HTML5 폴리 필 -자리 표시 자 섹션으로 이동

3
이 답변은 효과가 있지만 전체 기능을 사용하려면 링크를 따라야합니다. 여기의 코드만으로는 작동하지 않습니다.
Hawkee

1
그것은 작동하지 않습니다, 이것은 조롱 코드입니다! submit이벤트에 대해 동일한 "양식"을 반복해서 묶는 이유는 무엇입니까? 제출 이벤트는 무엇과 관련이 있습니다
vsync

IE8에서 자리 표시 자 텍스트와 동일한 텍스트를 입력하면 어떻게됩니까?
Bimal Das

3

내가 시도한 여러 플러그인과 호환성 문제가 있었는데 이것은 텍스트 입력에서 자리 표시자를 지원하는 가장 간단한 방법 인 것 같습니다.

function placeholders(){
    //On Focus
    $(":text").focus(function(){
        //Check to see if the user has modified the input, if not then remove the placeholder text
        if($(this).val() == $(this).attr("placeholder")){
            $(this).val("");
        }
    });

    //On Blur
    $(":text").blur(function(){
        //Check to see if the use has modified the input, if not then populate the placeholder back into the input
        if( $(this).val() == ""){
            $(this).val($(this).attr("placeholder"));
        }
    });
}

IE9를 지원합니까?
Viku

2
$(function(){    
    if($.browser.msie && $.browser.version <= 9){
        $("[placeholder]").focus(function(){
            if($(this).val()==$(this).attr("placeholder")) $(this).val("");
        }).blur(function(){
            if($(this).val()=="") $(this).val($(this).attr("placeholder"));
        }).blur();

        $("[placeholder]").parents("form").submit(function() {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr("placeholder")) {
                    $(this).val("");
                }
            })
        });
    }
});

이 시도


1

나는 이것을 사용합니다 .Javascript 일뿐입니다.

단순히 값이있는 입력 요소가 있으며 사용자가 입력 요소를 클릭하면 값이없는 입력 요소로 변경됩니다.

CSS를 사용하여 텍스트의 색상을 쉽게 변경할 수 있습니다. 자리 표시 자의 색상은 id #IEinput의 색상이며 입력 한 텍스트의 색상은 id #email의 색상입니다. 하지 마십시오 자리 표시자를 지원하지 않는 IE의 버전, getElementsByClassName 중 하나를 지원하지 않기 때문에, getElementsByClassName을 사용!

원래 비밀번호 입력 유형을 텍스트로 설정하여 비밀번호 입력에 플레이스 홀더를 사용할 수 있습니다.

땜장이 : http://tinker.io/4f7c5/1-JSfiddle 서버가 다운되었습니다!

*내 하찮은 영어 실력에 죄송하다는 말씀을 드리고 싶습니다

자바 스크립트

function removeValue() {
    document.getElementById('mailcontainer')
        .innerHTML = "<input id=\"email\" type=\"text\" name=\"mail\">";
    document.getElementById('email').focus(); }

HTML

<span id="mailcontainer">
    <input id="IEinput" onfocus="removeValue()" type="text" name="mail" value="mail">
</span>

3
필드가 비어 있고 초점이 없어지면 자리 표시자가 다시 와야합니다.
Chris Pratt

1

여기에 상륙하는 다른 사람들을 위해. 이것이 나를 위해 일한 것입니다.

//jquery polyfill for showing place holders in IE9
$('[placeholder]').focus(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
    }
}).blur(function() {
    var input = $(this);
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
}).blur();

$('[placeholder]').parents('form').submit(function() {
    $(this).find('[placeholder]').each(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    })
});

script.js 파일에 이것을 추가하십시오. 씨의 http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html


0

대부분의 솔루션이 jQuery를 사용하거나 원하는대로 만족스럽지 않기 때문에 mootools에 대한 스 니펫을 작성했습니다.

function fix_placeholder(container){
    if(container == null) container = document.body;

    if(!('placeholder' in document.createElement('input'))){

        var inputs = container.getElements('input');
        Array.each(inputs, function(input){

            var type = input.get('type');

            if(type == 'text' || type == 'password'){

                var placeholder = input.get('placeholder');
                input.set('value', placeholder);
                input.addClass('__placeholder');

                if(!input.hasEvent('focus', placeholder_focus)){
                    input.addEvent('focus', placeholder_focus);
                }

                if(!input.hasEvent('blur', placeholder_blur)){
                    input.addEvent('blur', placeholder_blur);
                }

            }

        });

    }
}

function placeholder_focus(){

    var input = $(this);    

    if(input.get('class').contains('__placeholder') || input.get('value') == ''){
        input.removeClass('__placeholder');
        input.set('value', '');
    }

}

function placeholder_blur(){

    var input = $(this);    

    if(input.get('value') == ''){
        input.addClass('__placeholder');
        input.set('value', input.get('placeholder'));
    }

}

나는 그것이 다른 사람들보다 조금 더 보인다고 고백하지만 잘 작동합니다. __placeholder 는 자리 표시 자 텍스트의 색상을 멋지게 만드는 ccs 클래스입니다.

window.addEvent ( 'domready', ... 및 팝업과 같은 추가 코드에 fix_placeholder 를 사용했습니다 .

네가 좋아하길 바래.

친절합니다.



0
<input type="text" name="Name" value="Name" onfocus="this.value = ''" onblur=" if(this.value = '') { value = 'Name'}" />

0

아래 코드를 추가하면 완료됩니다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="https://code.google.com/p/jquery-placeholder-js/source/browse/trunk/jquery.placeholder.1.3.min.js?r=6"></script>
    <script type="text/javascript">
        // Mock client code for testing purpose
        $(function(){
            // Client should be able to add another change event to the textfield
            $("input[name='input1']").blur(function(){ alert("Custom event triggered."); });    
            // Client should be able to set the field's styles, without affecting place holder
            $("textarea[name='input4']").css("color", "red");

            // Initialize placeholder
            $.Placeholder.init();

            // or try initialize with parameter
            //$.Placeholder.init({ color : 'rgb(255, 255, 0)' });

            // call this before form submit if you are submitting by JS
            //$.Placeholder.cleanBeforeSubmit();
        });
    </script>

https://code.google.com/p/jquery-placeholder-js/downloads/detail?name=jquery.placeholder.1.3.zip 에서 전체 코드 및 데모를 다운로드 하십시오.


0

다음은 IE 8 이하의 자리 표시자를 만드는 자바 스크립트 함수이며 암호에서도 작동합니다.

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


-1
    <script>
        if ($.browser.msie) {
            $('input[placeholder]').each(function() {

                var input = $(this);

                $(input).val(input.attr('placeholder'));

                $(input).focus(function() {
                    if (input.val() == input.attr('placeholder')) {
                        input.val('');
                    }
                });

                $(input).blur(function() {
                    if (input.val() == '' || input.val() == input.attr('placeholder')) {
                        input.val(input.attr('placeholder'));
                    }
                });
            });
        }
        ;
    </script>

$ .browser.msie는 더 이상 지원되지 않습니다. 대신 기능 감지를 사용해보십시오.
invot
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.