Question

占位符在IE-9中不起作用，因此我使用以下代码作为占位符。

 jQuery(function () {
     debugger;
     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;
         $(':text').focus(function () {
             if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
                 $(this).val('').removeClass('hasPlaceholder');
             }
         }).blur(function () {
             if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
                 $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
             }
         });
         $(':text').blur();
         $(active).focus();
         $('form:eq(0)').submit(function () {
             $(':text.hasPlaceholder').val('');
         });
     }
 });

当我使用 test 的值时，它会显示null。如何获取所有输入标记的详细信息？

Answer 1

我认为这会对你有帮助

if ($.browser.msie) {
                    $("input").each(function () {
                        if (IsNull($(this).val()) && $(this).attr("placeholder") != "") {
                            $(this).val($(this).attr("placeholder")).addClass('hasPlaceHolder');
                            $(this).keypress(function () {
                                if ($(this).hasClass('hasPlaceHolder')) $(this).val("").removeClass('hasPlaceHolder');
                            });
                            $(this).blur(function () {
                                if ($(this).val() == "") $(this).val($(this).attr("placeholder")).addClass('hasPlaceHolder');
                            });
                        }
                    });
                }

Answer 2

我在手机上，所以这很难但你真的需要做

JQuery.support.placeholder = typeof 'placeholder' in test !== 'undefined'

因为null表示没有占位符值，但有占位符支持

根据我的理解，你说测试中的占位符返回null

Answer 3

我建议你不要自己写这个，然后去找一个现成的解决方案。如果您想要的只是为旧浏览器提供支持，那么您可能希望自己解决这个问题。

例如，这是我正在使用的垫片（建议在http://html5please.com上使用）：https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js

继续阅读代码。在编写这样的垫片时，您需要考虑以下几个问题：

检测浏览器支持，
在框中包含真实输入时保持跟踪;
添加一个类以允许占位符使用不同的文本颜色
在提交表单之前清除占位符
在重新加载页面时清除占位符
处理textarea，
处理input[type=password]

这可能不是全部。（我链接的库也挂钩到jQuery，以便当框中没有真正的输入时.val()返回''。

还有另一个垫片使用完全不同的方法：https://github.com/parndt/jquery-html5-placeholder-shim/blob/master/jquery.html5-placeholder-shim.js

此库不会触及输入的实际值，而是直接在其上显示元素。

Answer 4

HTML：

<input type='text' id='your_field' value='Enter value'/>

jQuery的：

$(document).ready(function(){
    $("#your_field").on('focusout',function(){
        if($("#your_field").val() == ''){
            $("#your_field").val('Enter value');
        }
    });
    $("#your_field").on('focus',function(){
        if($("#your_field").val() == 'Enter value'){
            $("#your_field").val('');
        }
    });
});

请参阅DEMO

同时检查表单何时发布，因为如果用户在未输入字段的情况下提交表单，则Enter value将作为字段的值发布。所以在客户端进行验证或在服务器端检查提交表格时。

占位符不起作用

4 个答案: