Placeholder not working in IE10

后端 未结 3 1334
粉色の甜心
粉色の甜心 2021-01-16 13:25

html:

3条回答
  •  旧时难觅i
    2021-01-16 13:51

    Try this, is jquery pluin for placeholder in browser that don't support perfectly it. Leaving your php code and adding this js it should work:

    (function($) {
    
    /**
     * Spoofs placeholders in browsers that don't support them (eg Firefox 3)
     * 
     * Copyright 2011 Dan Bentley
     * Licensed under the Apache License 2.0
     *
     * Author: Dan Bentley [github.com/danbentley]
     */
    
    // Return if native support is available.
    if ("placeholder" in document.createElement("input")) return;
    
    $(document).ready(function(){
        $(':input[placeholder]').not(':password').each(function() {
            setupPlaceholder($(this));
        });
    
        $(':password[placeholder]').each(function() {
            setupPasswords($(this));
        });
    
        $('form').submit(function(e) {
            clearPlaceholdersBeforeSubmit($(this));
        });
    });
    
    function setupPlaceholder(input) {
    
        var placeholderText = input.attr('placeholder');
    
        setPlaceholderOrFlagChanged(input, placeholderText);
        input.focus(function(e) {
            if (input.data('changed') === true) return;
            if (input.val() === placeholderText) input.val('');
        }).blur(function(e) {
            if (input.val() === '') input.val(placeholderText); 
        }).change(function(e) {
            input.data('changed', input.val() !== '');
        });
    }
    
    function setPlaceholderOrFlagChanged(input, text) {
        (input.val() === '') ? input.val(text) : input.data('changed', true);
    }
    
    function setupPasswords(input) {
        var passwordPlaceholder = createPasswordPlaceholder(input);
        input.after(passwordPlaceholder);
    
        (input.val() === '') ? input.hide() : passwordPlaceholder.hide();
    
        $(input).blur(function(e) {
            if (input.val() !== '') return;
            input.hide();
            passwordPlaceholder.show();
        });
    
        $(passwordPlaceholder).focus(function(e) {
            input.show().focus();
            passwordPlaceholder.hide();
        });
    }
    
    function createPasswordPlaceholder(input) {
        return $('').attr({
            placeholder: input.attr('placeholder'),
            value: input.attr('placeholder'),
            id: input.attr('id'),
            readonly: true
        }).addClass(input.attr('class'));
    }
    
    function clearPlaceholdersBeforeSubmit(form) {
        form.find(':input[placeholder]').each(function() {
            if ($(this).data('changed') === true) return;
            if ($(this).val() === $(this).attr('placeholder')) $(this).val('');
        });
    }
    })(jQuery);
    

    Then you have to invoke the plugin in your php page or in another js simply by:

     $(function() {
        // Invoke the plugin
        $('input, textarea').placeholder();       
       });
    

    Hope this helps!

提交回复
热议问题