输入占位符没有显示

我不知道为什么我的占位符没有显示。这是代码。输入占位符没有显示

<label>Input here:</label><span><input placeholder="Enter Epoch Time" type="number" id='my-id-is-here'></span> 

<label>Input2 here:</label><span><input placeholder="10" type="number" id='my-id2-is-here'></span>

当我加载页面时，我没有得到任何占位符只是空白输入。

谢谢。

来源

2014-01-21 Elliot Weil

似乎[工作]（http://jsfiddle.net/kY8dG/）。您正在测试哪个浏览器？ IE8？ – Vucko

你的输入标签被写为自动关闭，而最后没有前斜线。可能无法解决问题，但该部分是错误的。 – ganders

谢谢我将更正输入标记。 –

尝试此解决方案：

jQuery(function() { 
    jQuery.support.placeholder = false; 
    p = document.createElement('form'); 
    if('placeholder' in p) jQuery.support.placeholder = true; 
}); 

$(function() { 
    if(!$.support.placeholder) { 
     var active = document.activeElement; 
     $('input[type="text"], textarea').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'); 
     } 
     }); 
     $('input[type="text"], textarea').blur(); 
     $(active).focus(); 
     $('form:eq(0)').submit(function() { 
     $('input[type="text"].hasPlaceholder, textarea.hasPlaceholder').val(''); 
     }); 
    } 
});

来源

2014-01-21 20:37:43 wpdaniel

请记住，此脚本使用jQuery来覆盖所有浏览器，而不仅仅是那些不实现自己的默认处理（占位符） HTML5属性（例如，小于Internet Explorer 10）。 –

这个jQuery插件应该做的伎俩......

https://github.com/mathiasbynens/jquery-placeholder

支持到IE6

来源

2014-01-21 20:45:47

下面是使用Modernizr了坚实的修复，我已经测试过这回IE5：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Placeholder Fix</title> 
</head> 
<body> 
    <label>Input here:</label><span><input placeholder="Enter Epoch Time" type="number" id='my-id-is-here'></span> 
    <label>Input2 here:</label><span><input placeholder="10" type="number" id='my-id2-is-here'></span> 
    <style type="text/css"> 
     .placeholder { 
      color: red; 
      font-weight: normal; 
     } 
    </style> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.1.js"></script> 
    <script> 
     if (!Modernizr.input.placeholder) { 
      alert('in') 
      $('[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(); 
      $('[placeholder]').parents('form').submit(function() { 
       $(this).find('[placeholder]').each(function() { 
        var input = $(this); 
        if (input.val() == input.attr('placeholder')) { 
         input.val(''); 
        } 
       }) 
      }); 
     } 
    </script> 
</body> 
</html>

只要页面加载到不处理HTML5属性（如placeholder）的浏览器中，占位符文本就会变成红色，仅仅是为了证明Modernizr仅在浏览器不添加/处理HTML5 placeholder属性时，您显然可以将文本从红色改为标准#999或任何你喜欢的颜色。

享受！

来源

2014-01-21 21:36:07

输入占位符没有显示

回答

相关问题