HTML窗體「佔位符」不工作在IE 8

嗨我已經在我的網站上創建了一個窗體。我正在使用placeholder="Full Name"，但是在IE8（以及其他IE版本）中查看時沒有任何內容顯示在窗體中HTML窗體「佔位符」不工作在IE 8

我試過使用value="" onfocus="if (this.value == 'Full Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Full Name';}"，但表單仍爲空。出於某種原因，當您單擊表單時出現「全名」，然後關閉它。

我正在研究的網站是[usspcatalystcentre.org.uk] [1]，你可以看到我的意思。前兩種形式（標題&全名）是我已經使用

value="" onfocus="if (this.value == 'Full Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Full Name';}"

形式的其餘部分在哪裏我剛使用placeholder

下面是實際的代碼我工作的嘗試

<form action="contact.php" method="post"> 


       <input id=title name=title type=text value="" onfocus="if(this.value=='Username') this.value='';" onblur="if(this.value=='') this.value='Username';" required class="top-formfields" value='<?php print $_SESSION['title']?>'> <br /><br /> 
       <input id=fullname name=fullname type=text value="" onfocus="if(this.value=='Full Name') this.value='';" onblur="if(this.value=='') this.value='Full Name';" required class="top-formfields" value='<?php print $_SESSION['fullname']?>'> <br /><br /> 
       <input id=companyname name=companyname type=text placeholder="Company Name" required class="top-formfields" value='<?php print $_SESSION['companyname']?>'> <br /><br /> 
       <input id=companynumber name=companynumber type=text placeholder="Company Registered Number" required class="top-formfields" value='<?php print $_SESSION['companynumber']?>'> <br /><br /> 
       <textarea id=address name=address rows=5 placeholder="Address" required class="top-textarea"><?php print $_SESSION['address']?></textarea> <br /><br /> 
       <input id=postcode name=postcode type=text placeholder="Post Code" required class="top-formfields" value='<?php print $_SESSION['postcode']?>'> <br /><br /> 
       <input id=phonenumber name=phonenumber type=text placeholder="Phone Number" required class="top-formfields" value='<?php print $_SESSION['phonenumber']?>'> <br /><br /> 
       <input id=email name=email type=text placeholder="Email" required class="top-formfields" value='<?php print $_SESSION['email']?>'> <br /><br /> 
       <input id=mobile name=mobile type=text placeholder="Mobile" required class="top-formfields" value='<?php print $_SESSION['mobile']?>'> <br /><br /> 
       <input id=website name=website type=text placeholder="Website URL" required class="top-formfields" value='<?php print $_SESSION['website']?>'> <br /><br />

在此先感謝，湯姆

來源

2012-07-02 Tom

任何版本的IE都不支持佔位符屬性。 –

的placeholder ATTRIB ute是一項新的HTML5改進。它不支持舊的IE-S - http://diveintohtml5.info/forms.html

要模仿它的跨瀏覽器，你可能想使用jQuery - example

來源

2012-07-02 15:32:37

jQuery是一個通用的客戶端JS庫，它沒有爲'placeholder'提供一個polyfill。 – Quentin

@Quentin sure ..這就是爲什麼我說*模仿* - 它可以給你的感覺，而不是支持 –

IE 9不支持佔位符，這樣拿出的第一個解決方案我頭腦是這樣的。

祝你好運！

<script type="text/javascript"> 
    if(navigator.userAgent.indexOf("MSIE") > 0) 
    { 
     $(function() 
     { 
      var input = document.createElement("input"); 
      if(('placeholder' in input) == false) 
      { 
       $('[placeholder]').focus(function() 
       { 
        var i = $(this); 
        if(i.val() == i.attr('placeholder')) 
        { 
         i.val('').removeClass('placeholder'); 
         if(i.hasClass('password')) 
         { 
          i.removeClass('password'); this.type='password'; 
         } 
        } 
       }).blur(function() 
       { 
        var i = $(this); 
        if(i.val() == '' || i.val() == i.attr('placeholder')) 
        { 
         if(this.type=='password') 
         { 
          i.addClass('password'); this.type='text'; 
         } 
         i.addClass('placeholder').val(i.attr('placeholder')); 
        } 
       }).blur().parents('form').submit(function() 
       { 
        $(this).find('[placeholder]').each(function() 
        { 
         var i = $(this); 
         if(i.val() == i.attr('placeholder')) i.val(''); 
        }); 
       }); 
      } 
     }); 
    } 


    </script>

來源

2013-03-26 05:16:59

湯姆，佔位符不是IE8支持的屬性。

我認爲這將有助於你與你要去的方向：

預填充「全名」字段。預先給它的值=「全名」作爲默認值。

onfocus= "if (this.value=='Full Name'){this.select();this.value='';this.style.color='#999999';}else{this.style.color='#000000';}" 

onclick= "if (this.value=='Full Name'){this.select();this.value='';this.style.color='#999999';}else{this.style.color='#000000';}" 

onblur= "if (this.value==''||this.value=='Full Name'){this.value='Full Name';this.style.color='#999999';}else{this.style.color='#000000';}" 

onkeyup= "if (this.value=='Full Name'){this.select();this.style.color='#999999';}else{this.style.color='#000000';}" 

onchange="if (this.value=='Full Name'){this.style.color='#999999';}else{this.style.color='#000000';}"

來源

2014-04-01 00:04:46

if (!('placeholder' in $('<input>')[0])) { // Create a dummy element for feature detection 
    $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add); // Select the elements that have a placeholder attribute 
    $('form').submit(function(){$(this).find('input[placeholder], textarea[placeholder]').each(remove);}); // Remove the placeholder text before the form is submitted 
}

來源

2014-06-05 18:40:54

請給你的答案添加一些解釋！ –

保存下面的代碼爲.js，確保改變輸入型

$(document).ready(function() { 
    if ($.browser.msie) { //this is for only ie condition (microsoft internet explore) 
     $('input[type="text"][placeholder], textarea[placeholder]').each(function() { 
      var obj = $(this); 
      if (obj.attr('placeholder') != '') { 
       obj.addClass('IePlaceHolder'); 

       if ($.trim(obj.val()) == '' && obj.attr('type') != 'password') { 
        obj.val(obj.attr('placeholder')); 
       } 
      } 
     }); 

     $('.IePlaceHolder').focus(function() { 
      var obj = $(this); 
      if (obj.val() == obj.attr('placeholder')) { 
       obj.val(''); 
      } 
     }); 

     $('.IePlaceHolder').blur(function() { 
      var obj = $(this); 
      if ($.trim(obj.val()) == '') { 
       obj.val(obj.attr('placeholder')); 
      } 
     }); 
    } 
});

http://jsfiddle.net/wbcTm/79/

來源

2014-07-21 12:30:00 Charix

確保添加瀏覽器檢測，如果你使用jQuery 1.9+ 。您可以使用此命令從終端安裝它npm install jquery.browser

來源

2014-11-25 23:17:18 Mike

HTML窗體「佔位符」不工作在IE 8

回答

相關問題