[英]ASP Textbox control placeholder property doesn't work in Internet Explorer
I'm using the framework of Materialize
from materializecss.com
. 我正在使用来自
materializecss.com
的Materialize
框架。 The placeholder for the textbox isn't working on IE, I think the framework has something to do with this because from my other page I tried using bootstrap framework, and the placeholder property worked, is there any solution for me to make the
placeholder property work on the Materialize framework?
文本框的占位符在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>
You need to add onfocus
and onblur
property in your textbox for working it in Internet Explorer
您需要在文本框中添加
onfocus
和onblur
属性,才能在Internet Explorer
它
Here you go 干得好
<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>
Placeholder text for form elements was never implemented for IE9, Placeholder support was added in IE10 . 从未为IE9实现表单元素的占位符文本, 在IE10中添加了占位符支持 。
You can either use 您可以使用
HTML5 Placeholder jQuery Plugin - by Mathias Bynens (a collaborator on HTML5 Boilerplate and jsPerf) HTML5占位符jQuery插件-Mathias Bynens(HTML5 Boilerplate和jsPerf的合作者)
https://github.com/mathiasbynens/jquery-placeholder https://github.com/mathiasbynens/jquery-placeholder
Demo & Examples 演示与范例
http://mathiasbynens.be/demo/placeholder http://mathiasbynens.be/demo/placeholder
or you can use the code below to do the same think without jquery. 或者您可以使用下面的代码在没有jquery的情况下进行同样的思考。 This code was taken from https://stackoverflow.com/a/9109448/394381 written by "Mark Rhodes"
此代码取自“马克·罗德斯”(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..
};
}());
For each text field you want to use it for you need to run placeHolder(HTMLInputElement)
对于要使用它的每个文本字段,需要运行
placeHolder(HTMLInputElement)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.