Cách hỗ trợ thuộc tính giữ chỗ trong IE8 và 9

Tôi có một vấn đề nhỏ, placeholderthuộc tính cho các hộp đầu vào không được hỗ trợ trong IE 8-9.

Cách tốt nhất để thực hiện hỗ trợ này trong dự án của tôi (ASP Net) là gì. Tôi đang sử dụng jQuery. Tôi cần sử dụng một số công cụ bên ngoài khác cho nó?

Là http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html là một giải pháp tốt?

Bạn có thể sử dụng plugin jQuery này: https://github.com/mathiasbynens/jquery-placeholder

Nhưng liên kết của bạn dường như cũng là một giải pháp tốt.

Bạn có thể sử dụng bất kỳ một trong những polyfill này:

• https://github.com/jamesallardice/Placeholder.js (không hỗ trợ các trường mật khẩu)
• https://github.com/chemerisuk/better-placeholder-polyfill

Các tập lệnh này sẽ thêm hỗ trợ cho placeholderthuộc tính trong các trình duyệt không hỗ trợ nó và chúng không yêu cầu jQuery!

các $ .Browser.msie không nằm trong JQuery mới nhất nữa ... bạn phải sử dụng $ .Hỗ trợ

như dưới đây:

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

nếu bạn sử dụng jquery bạn có thể làm như thế này. từ trang này Placeholder với Jquery

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

đây là những liên kết thay thế

1. Thư viện jquery giữ chỗ
2. Các polyfill HTML5 - dành cho phần giữ chỗ

Tôi đã gặp sự cố tương thích với một số plugin tôi đã thử, đây dường như là cách đơn giản nhất để hỗ trợ giữ chỗ trên các kiểu nhập văn bản:

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

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

thử cái này

Tôi sử dụng cái này, nó chỉ là Javascript.

Tôi chỉ đơn giản là có một phần tử đầu vào có giá trị và khi người dùng nhấp vào phần tử đầu vào, nó sẽ thay đổi thành phần tử đầu vào không có giá trị.

Bạn có thể dễ dàng thay đổi màu sắc của văn bản bằng CSS. Màu của trình giữ chỗ là màu trong id #IEinput và màu văn bản bạn nhập sẽ là màu trong id #email. Không sử dụng getElementsByClassName, vì các phiên bản IE không hỗ trợ trình giữ chỗ, cũng không hỗ trợ getElementsByClassName!

Bạn có thể sử dụng trình giữ chỗ trong nhập mật khẩu bằng cách đặt loại nhập mật khẩu gốc thành văn bản.

Tinker: http://tinker.io/4f7c5/1 - Máy chủ JSfiddle ngừng hoạt động!

*Xin lỗi vì tiếng Anh của tôi không tốt

JAVASCRIPT

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>

Đối với những người khác hạ cánh ở đây. Đây là những gì làm việc cho tôi:

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

Chỉ cần thêm nó trong tập tin script.js của bạn. Được phép của http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Vì hầu hết các giải pháp đều sử dụng jQuery hoặc điều này không thỏa mãn như tôi mong muốn, nên tôi đã viết một đoạn trích cho chính mình cho 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'));
    }

}

Tôi thú nhận rằng nó trông THÊM hơn một chút so với những người khác nhưng nó hoạt động tốt. __placeholder là một lớp ccs để làm cho màu sắc của văn bản giữ chỗ trở nên lạ mắt.

Tôi đã sử dụng fix_placeholder trong window.addEvent (' dom yet ', ... và cho bất kỳ mã được thêm vào như cửa sổ bật lên.

Hy vọng bạn thích nó.

Trân trọng.

Tôi đã sử dụng mã của liên kết này http://dipaksblogonline.blogspot.com/2012/02/html5-placeholder-in-ie7-and-ie8-fixed.html

Nhưng trong phát hiện trình duyệt tôi đã sử dụng:

if (navigator.userAgent.indexOf('MSIE') > -1) {
 //Your placeholder support code here...
}

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

Thêm mã dưới đây và nó sẽ được thực hiện.

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

Tải xuống toàn bộ mã và bản demo từ https://code.google.com.vn/p/jquery-placeholder-js/doads/detail?name=jquery.placeholder.1.3.zip

Đây là một chức năng javascript sẽ tạo giữ chỗ cho IE 8 trở xuống và nó cũng hoạt động với mật khẩu:

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

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