ASP Textbox控件占位符屬性在Internet Explorer中不起作用

Question

我正在使用來自materializecss.com的Materialize框架。 文本框的占位符在IE上不起作用，我認為該框架與此有關，因為在我嘗試使用引導框架的其他頁面中， 占位符屬性起作用了，對於我來說，有沒有解決方案可以使占位符屬性在Materialise框架上工作？

<div class="row">
  <div class="input-field col s10">
     <asp:TextBox ID="txtCompany" runat="server" Visible="false" placeholder="Company Name" ></asp:TextBox>                  
   </div>
  <div class="input-field col s2">
     <asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn waves-effect waves-red" OnClick="btnSave_Click" Visible="false" />
  </div>
</div>

Answer 1

您需要在文本框中添加onfocus和onblur屬性，才能在Internet Explorer它

干得好

<div class="input-field col s10">
    <asp:TextBox ID="txtCompany" runat="server" value="Company Name" placeholder="Company Name" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"></asp:TextBox>
</div>

Answer 2

從未為IE9實現表單元素的占位符文本， 在IE10中添加了占位符支持 。

您可以使用

HTML5占位符jQuery插件-Mathias Bynens（HTML5 Boilerplate和jsPerf的合作者）

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

演示與范例

http://mathiasbynens.be/demo/placeholder

或者您可以使用下面的代碼在沒有jquery的情況下進行同樣的思考。 此代碼取自“馬克·羅德斯”（Mark Rhodes）撰寫的https://stackoverflow.com/a/9109448/394381

(function(){

     "use strict";

     //shim for String's trim function..
     function trim(string){
         return string.trim ? string.trim() : string.replace(/^\s+|\s+$/g, "");
     }

     //returns whether the given element has the given class name..
     function hasClassName(element, className){ 
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return false;
         var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
         return regex.test(element.className);
     }

     function removeClassName(element, className){
         //refactoring of Prototype's function..
         var elClassName = element.className;
         if(!elClassName)
             return;
         element.className = elClassName.replace(
             new RegExp("(^|\\s+)" + className + "(\\s+|$)"), ' ');
     }

     function addClassName(element, className){
         var elClassName = element.className;
         if(elClassName)
             element.className += " " + className;
         else
             element.className = className;
     }

     //strings to make event attachment x-browser.. 
     var addEvent = document.addEventListener ?
            'addEventListener' : 'attachEvent';
     var eventPrefix = document.addEventListener ? '' : 'on';

     //the class which is added when the placeholder is being used..
     var placeHolderClassName = 'usingPlaceHolder';

     //allows the given textField to use it's placeholder attribute
     //as if it's functionality is supported natively..
     window.placeHolder = function(textField){

         //don't do anything if you get it for free..
         if('placeholder' in document.createElement('input'))
             return;

         //don't do anything if the place holder attribute is not
         //defined or is blank..
         var placeHolder = textField.getAttribute('placeholder');        
         if(!placeHolder)
             return;

         //if it's just the empty string do nothing..
         placeHolder = trim(placeHolder);
         if(placeHolder === '')
             return;

         //called on blur - sets the value to the place holder if it's empty..
         var onBlur = function(){
             if(textField.value !== '') //a space is a valid input..
                 return;
             textField.value = placeHolder;
             addClassName(textField, placeHolderClassName);
         };

         //the blur event..
         textField[addEvent](eventPrefix + 'blur', onBlur, false);

         //the focus event - removes the place holder if required..
         textField[addEvent](eventPrefix + 'focus', function(){
             if(hasClassName(textField, placeHolderClassName)){
                removeClassName(textField, placeHolderClassName);
                textField.value = "";
             }
         }, false);

         //the submit event on the form to which it's associated - if the
         //placeholder is attached set the value to be empty..
         var form = textField.form;
         if(form){
             form[addEvent](eventPrefix + 'submit', function(){
                 if(hasClassName(textField, placeHolderClassName))
                     textField.value = '';
            }, false);
         }

         onBlur(); //call the onBlur to set it initially..
    };

}());

對於要使用它的每個文本字段，需要運行placeHolder(HTMLInputElement)