輸入佔位符沒有顯示

我不知道爲什麼我的佔位符沒有顯示。這是代碼。輸入佔位符沒有顯示

<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

輸入佔位符沒有顯示

回答

相關問題