7

占位符在 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。如何获取所有输入标签的详细信息？

4

4 回答 4

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');
                            });
                        }
                    });
                }
于 2013-08-30T05:05:58.537 回答
0

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

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

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

据我了解，您是说 test 中的占位符返回 null

于 2013-08-28T12:07:03.670 回答
-1

我建议您不要自己编写此代码，而是使用现成的解决方案。如果您想要的只是为旧版浏览器提供支持，那么您可能希望自己解决这里的更多复杂问题。

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

继续阅读代码。这些是您在编写此类 shim 时需要牢记的一些问题：

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

这可能还不是全部。（我链接的库也与 jQuery 挂钩，以便在框中没有实际输入时.val()返回。''

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

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

于 2013-08-28T12:25:56.440 回答
-3

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

见演示

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

于 2013-08-28T12:00:47.460 回答