1

したがって、IE10 より前の IE では HTML5placeholder属性がサポートされていないことは承知していますが、その機能が本当に必要です。

私は次のことができると思っていましたが、うまくいかないようです（.focusand.blurメソッドが起動されていないようです...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
    $(function() {

        function isPlaceholderSupported() {
            var input = document.createElement('input');
            return ('placeholder' in input);
        }

        var placeholderSupport = isPlaceholderSupported();

        if (placeholderSupport == false) {
            $('#store_name').val('Store Name');
        }

        $('#store_name').focus(function() {
            if (placeholderSupport == false) {
                if ($(this).val() == 'Store Name') {
                    $(this).val('');
                }
            }
        });

        $('#store_name').blur(function() {
            if (placeholderSupport == false) {
                if ($(this).val() == '') {
                    $(this).val('Store Name');
                }
            }
        });
    });
</script>

<input type="text" name="store_name" id="store_name" placeholder="Store Name" />

ここではロジックに欠陥は見られませんが、これは機能していません。Chrome の開発ツールで報告されているエラーはありません。IE9 ではまだ試していません。

どんな助けでも大歓迎です！

4

6 に答える 6

1 
<input id="email" type="text"/>

 /*placeholder*/
function initPlaceHolder(input, defaultValue) {
    input.onfocus = function() {
                    if (input.value == defaultValue){
                      input.value = "";
                      input.style.color = '#444444';
                    }
                  };

    function remove() {
        if (input.value == "") {
          input.value = defaultValue;
          input.style.color = '#c9c9c9';              
        }
    }
    input.onblur = remove;
    remove();
}
window.onload = function(){
    initPlaceHolder(document.getElementById("email"), "Enter your Email");
};
于 2012-11-25T16:50:33.757 に答える
0 
/*For placeholder*/ 
function ClearPlaceHolder(input) {      
    if (input.value == input.defaultValue){
        input.value = "";
        document.getElementById(input.id).style.color = '#444444';
    }
}

function SetPlaceHolder (input) {
   if (input.value == "") {
        input.value = input.defaultValue;
        document.getElementById(input.id).style.color = '#c9c9c9';              
    }
}
于 2012-11-24T13:37:44.013 に答える
0

この方法は、IE9+ をサポートするプレースホルダーに使用できます。

$('[placeholder]').focus(function () {
    var input = $(this);
    if(input.attr('data-password') == 'password') {
        input.attr('type','password');
        input.attr('data-password','text');
    }
    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
        if(input.attr('type') == 'password') {
            input.attr('type','text');
            input.attr('data-password','password');
        }
    }
}).blur(function () {
    var input = $(this);
    if(input.attr('data-password') == 'password') {
        input.attr('type','password');
        input.attr('data-password','text');
    }
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
        if(input.attr('type') == 'password') {
            input.attr('type','text');
            input.attr('data-password','password');
        }
    }
}).keyup(function () {
    var input = $(this);
    if(input.attr('data-password') == 'password') {
        input.attr('type','password');
        input.attr('data-password','text');
    }
    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        if(input.attr('type') == 'password') {
            input.attr('type','text');
            input.attr('data-password','password');
        }
    }
}).blur();
于 2013-12-10T10:30:31.857 に答える
0

http://archive.plugins.jquery.com/project/jq-watermarkのような既存のプラグインを使用しないのはなぜですか?

于 2012-11-24T13:52:25.693 に答える
0 
/* <![CDATA[ */
$(function() {
var input = document.createElement("input");
if(('placeholder' in input)==false) { 
    $('[placeholder]').focus(function() {
        var i = $(this);
        if(i.val() == i.attr('placeholder')) {
            i.val('').removeClass('placeholder');
            if(i.hasClass('password')) {
                i.removeClass('password');
                this.type='password';
            }           
        }
    }).blur(function() {
        var i = $(this);    
        if(i.val() == '' || i.val() == i.attr('placeholder')) {
            if(this.type=='password') {
                i.addClass('password');
                this.type='text';
            }
            i.addClass('placeholder').val(i.attr('placeholder'));
        }
    }).blur().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder'))
                i.val('');
        })
    });
}
});
/* ]]> */

これを試してみてください..

于 2013-05-04T15:10:16.953 に答える
-1

以下の jQuery は IE のみを確認してください

    $(function() {
       var textBox = $('input[type="text"]');
       textBox.each(function() {
        var self = $(this);
        self.val(self.attr('placeholder'));
       });
    });
    $(document).on('focus', textBox, function() {
        var self = $(this);
       if(self.val() == self.attr('placeholder')) {
           self.val('');
       }
    });
    $(document).on('blur', textBox, function() {
        var self = $(this);
        if(self.val() == '') {
            self.val(self.attr('placeholder'));
        }
    });
于 2012-11-16T12:48:02.183 に答える