Question

我正在尝试使用其中一个IE9 IE8占位符解决方案，但我在IE9测试设置中显示错误代码。我正在使用的解决方案显然是根据github中的注释和更新为许多人工作，但是我在识别代码时遇到了根本问题。

我在页面标题中有这一行，这应该允许我使用jquery。实际上我正在运行其他jquery函数，它们似乎正在工作：

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

同样在头脑中我有这个（我的myjs.js中的所有其他功能都显示在开发人员工具中并且可以根据需要提供）：

<!-- my java code link -->
<script src="/js/myjs.js"></script>

我用于占位符解决方案的功能就是这个：

placeholderSupport = ("placeholder" in document.createElement("input"));
if (!placeholderSupport) {
    //This browser does not support the placeholder attribute
    //use javascript instead
    $('[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().parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() === input.attr('placeholder')) {
                input.val('');
            }
        })
    });
}

我从IE9开发人员工具获得的错误是：

Invalid App Id: Must be a number or numeric string representing the application id.

错误显示在看起来像这样的代码行上，特别是美元符号：

$('[placeholder]').focus(function() {

从我的阅读中我认为$ start是jquery库的一个函数，我相信它能够出现并正常工作，但我显然错过了一个技巧。请有人帮忙吗。感谢您提供任何指导。

Answer 1

试试这个代码，它适用于IE8 +

更新：匹配所有inputs和textarea

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function () {
    jQuery.support.placeholder = false;
    test = document.createElement('input');
    if ('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it. 
$(function () {
    if (!$.support.placeholder) {
        var active = document.activeElement;
        $('input,textarea').focus(function () {
            if ($(this).attr('placeholder') !== '' && $(this).val() == $(this).attr('placeholder')) {
                $(this).val('').removeClass('has-placeholder');
            }
        }).blur(function () {
            if ($(this).attr('placeholder') !== '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                $(this).val($(this).attr('placeholder')).addClass('has-placeholder');
            }
        });
        $('input,textarea').blur();
        $(active).focus();
        $('form:eq(0)').submit(function () {
            $('input.has-placeholder,textarea.has-placeholder').val('');
        });
    }
});

加上 CSS

.has-placeholder {
    color:#777 /*whatever you like*/
}

Answer 2

这是使用Dippas＆＃39;的最终代码。回答附加内容以涵盖textareas和输入类型=＆＃39; tel＆＃39;而不是键入=＆＃39; text＆＃39;。这似乎涵盖了我表单上的所有内容，但可能还有其他输入类型需要在其他时间添加。我确信知道自己在做什么的人可以通过整理一些重复的代码来减少这种情况。

// This adds 'placeholder' to the items listed in the jQuery .support object. 
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if ('placeholder' in test) jQuery.support.placeholder = true;});
// This adds placeholder support to browsers that wouldn't otherwise support it. 
$(function() {
if (!$.support.placeholder) {
    var active = document.activeElement;
    $('textarea').focus(function() {
        if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('').removeClass('has-placeholder');
        }
    }).blur(function() {
        if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('has-placeholder');
        }
    });
    $('textarea').blur();
    $(active).focus();
    $('form:eq(0)').submit(function() {
        $('textarea.has-placeholder').val('');
    });
    $('input').focus(function() {
        if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('').removeClass('has-placeholder');
        }
    }).blur(function() {
        if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('has-placeholder');
        }
    });
    $('input').blur();
    $(active).focus();
    $('form:eq(0)').submit(function() {
        $('input.has-placeholder').val('');
    });
  }
});

使用jquery实现Placeholder解决方案

2 个答案: