ASP 文本框控件占位符属性在 Internet Explorer 中不起作用

Question

我正在使用来自 materializecss.com 的 Materialize 的框架。文本框的占位符在 IE 上不起作用，我认为框架与此有关，因为在我的其他页面中我尝试使用 bootstrap 框架和 placeholder 属性有效，我是否有任何解决方案可以使 placeholder 属性在 Materialize 框架上工作？

<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 从未实现表单元素的占位符文本，Placeholder support was added in IE10。

您可以使用

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

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

演示与示例

http://mathiasbynens.be/demo/placeholder

或者您可以使用下面的代码在没有 jquery 的情况下进行同样的思考。此代码取自 "Mark Rhodes"

编写的

(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)

ASP 文本框控件占位符属性在 Internet Explorer 中不起作用

ASP Textbox control placeholder property doesn't work in Internet Explorer

asp.net

materialize

twitter-bootstrap

ASP 文本框控件占位符 属性 在 Internet Explorer 中不起作用

ASP Textbox control placeholder property doesn't work in Internet Explorer

asp.net

materialize

twitter-bootstrap

ASP 文本框控件占位符属性在 Internet Explorer 中不起作用