Fatal编程技术网
  • html/
  • Html 如何在IE8和IE9中支持占位符属性

Html 如何在IE8和IE9中支持占位符属性

html internet-explorer

Html 如何在IE8和IE9中支持占位符属性,html,internet-explorer,placeholder,Html,Internet Explorer,Placeholder,我有一个小问题，IE 8-9不支持输入框的占位符属性 在我的项目（ASP Net）中实现此支持的最佳方式是什么。我正在使用jQuery。 我需要使用其他外部工具吗 是一个好的解决方案吗？您可以使用这个jQuery插件： 但是您的链接似乎也是一个很好的解决方案。如果您使用jquery，您可以这样做。从这个网站 这些是备用链接 --转到占位符部分 可以使用以下任意一种多边形填充： （不支持密码字段） 这些脚本将在不支持占位符的浏览器中添加对占位符属性的支持，并且它们不需要jQuery 我使

我有一个小问题，IE 8-9不支持输入框的
占位符
属性

在我的项目（ASP Net）中实现此支持的最佳方式是什么。我正在使用jQuery。 我需要使用其他外部工具吗

是一个好的解决方案吗？

您可以使用这个jQuery插件：

但是您的链接似乎也是一个很好的解决方案。

如果您使用jquery，您可以这样做。从这个网站

这些是备用链接

  • --转到占位符部分
    • 可以使用以下任意一种多边形填充：

    • （不支持密码字段）
    这些脚本将在不支持占位符的浏览器中添加对占位符属性的支持，并且它们不需要jQuery

    我使用这个，它只是Javascript

    我只是有一个带有值的输入元素，当用户单击输入元素时，它会将其更改为没有值的输入元素

    您可以使用CSS轻松更改文本的颜色。占位符的颜色是id#IEinput中的颜色，键入的文本的颜色是id#电子邮件中的颜色不要使用getElementsByClassName，因为不支持占位符的IE版本也不支持getElementsByClassName

    通过将原始密码输入的类型设置为文本，可以在密码输入中使用占位符

    修补匠： -JSFIDLE服务器已关闭

    *对不起，我英语不好

    JAVASCRIPT

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

    函数removeValue（）{
document.getElementById（'mailcontainer'）
.innerHTML=“”；
document.getElementById（'email'）.focus（）；}
    HTML

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

    

    $（函数（）{
如果（$.browser.msie&&$.browser.version
    
如果（$.browser.msie）{
$（'input[placeholder]'）。每个（函数（）{
var输入=$（此）；
$（input.val（input.attr（'placeholder'））；
$（输入）.focus（函数（）{
if（input.val（）==input.attr（'placeholder'））{
input.val（“”）；
}
});
$（输入）.blur（函数（）{
if（input.val（）=''| input.val（）==input.attr（'placeholder'））{
val（input.attr（‘占位符’）；
}
});
});
}
;

    最新的JQuery中不再有$.Browser.msie。。。
您必须使用$。支持
    
如下图所示：
    

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

    

    
（函数（$）{
$.support.placeholder=（document.createElement（'input'）中的“placeholder”）；
})（jQuery）；
//修复IE7和IE8
$（函数（）{
if（！$.support.placeholder）{
$（“[占位符]”）。焦点（函数（）{
if（$（this.val（）==$（this.attr（“占位符”））$（this.val（“”）；
}).blur（函数（）{
if（$（this.val（）==“”）$（this.val（$（this.attr（“占位符”））；
}).blur（）；
$（“[占位符]”）。父项（“表单”）。提交（函数（）{
$（this.find（“[占位符]”）.each（函数（）{
if（$（this.val（）==$（this.attr（“占位符”））{
$（此）.val（“”）；
}
});
});
}
});

    由于大多数解决方案都使用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'));
    }

}

    
我承认它看起来比其他的多了一点，但是它很好用。
\uuuu placeholder是一个ccs类，用于使占位符文本的颜色更漂亮
    
我在window.addEvent（'domready'，…中使用了固定占位符，并用于任何额外添加的代码，如弹出窗口
    
希望你喜欢
    

    亲切问候。
    我使用了此链接的代码

    
但在浏览器检测中，我使用了：
    

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

    

    我尝试的几个插件都存在兼容性问题，在我看来，这是支持文本输入占位符的最简单方式：
    

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

    

    添加以下代码即可完成
    

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

    

    
//用于测试目的的模拟客户端代码
$（函数（）{
//客户端应该能够向文本字段添加另一个更改事件
$（“输入[name='input1']”）.blur（函数（）{alert（“自定义事件触发”）；}）；
//客户端应该能够设置字段的样式，而不会影响占位符
$（“textarea[name='input4']”）css（“颜色”、“红色”）；
//初始化占位符
$.Placeholder.init（）；
//或者尝试使用参数初始化
//$.Placeholder.init（{color:'rgb（255，255，0）'）；
//如果您是通过JS提交表单，请在表单提交之前调用此函数
//$.Placeholder.cleanBeforeSubmit（）；
});

    

    从
    下载完整的代码和演示，这里有一个javascript函数，可以为IE 8及以下版本创建占位符，也可以用于密码：
    


    /*函数，用于在IE 8及以下版本中添加占位符以形成元素*/
函数添加占位符（fm）{
for（var e=0；eif (navigator.userAgent.indexOf('MSIE') > -1) {
 //Your placeholder support code here...
}

    

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

    

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

    

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

    

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