占位符无法正常工作

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

- Nithin Viswanathan

---

占位符属性在低于IE 10的浏览器中无法支持。 - Deepu

看起来OP知道这一点，并正在尝试实现解决方法... - Teemu

这个已经有插件了，可以去 http://plugins.jquery.com/placeholder/ 下载。 - jcubic

人们和他们的jQuery插件。谈论让其他人来做工作。 - iConnor

因为这是你学习的方式，如果你只是一个“jQuery开发者”，只是在页面中添加了大量插件并希望它们能正常工作，那么你可能会遇到很多问题，而你不知道如何解决。编写自己的代码也很有趣。 - iConnor

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

- user2156088

Answer 2

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

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

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

从我的理解来看，你的意思是测试中的占位符返回了 null

- iConnor

Answer 3

我建议您不要自己编写代码，而是选择现成的解决方案。如果您只想为旧版浏览器提供支持，那么这里有更多的复杂性需要处理。

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

请阅读代码。以下是编写此类 shim 时需要考虑的一些问题：

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

这可能还不是全部。 (我链接的库还钩入了jQuery，以便在框中没有真正的输入时使.val()返回''。

---

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

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

- Kos

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

查看演示

同时，当表单提交时，请检查用户是否在未输入字段的情况下提交了表单，因为输入值将作为该字段的值发布。因此，在客户端执行任一验证或在提交表单时在服务器端进行检查。

- Deepu

---

请问那些给负评的用户能否查看演示？ - Deepu

我输入了“输入值”并单击文本框，结果我的文本消失了。 - tckmn

这种方法可怕之处在于，如果用户在不修改假占位符值的情况下提交表单，它将使用默认数据提交表单，而不像占位符那样提交空值。你应该指出，由于新手可能会使用你的百分之百完美有效的代码，但仍然不能理解为什么占位符文本有时会出现在他们的表单中！ - Ahmad Alfy

这个不错，@AhmadAlfy。谢谢你指出来。我已经在我的答案中提到了它。 - Deepu