一个占位符是一个文本框,文本浅色当没有价值,不集中。
上面“testAttribute”功能是为了测试一个元素的一个属性是由一个web浏览器。在本例中,我们想知道您的web浏览器支持“占位符”“输入”元素的属性。
如果“不支持占位符,我让浏览器运行一些Javascript代码创建这样一个占位符,您可以使用自己的Javascript,而不是我的,(我的代码创建展示,可能不适合生产)
下面是一个占位符应如何看起来像如果没有输入值和文本框不是重点。(你看到的只是图片,而不是真正的占位符,不要点击它)
如果占位符只是可有可无的功能在您的web页面,您可能不会支持浏览器除了以上烦恼。
否则,你将不得不去额外英里。首先,使用Javascript来检查浏览器是否支持占位符,浏览器不支持占位符,使用Javascript + CSS来创建一个占位符。
<label for="demo">Placeholder demo</label> : <input id ="demo" placeholder="Support Placeholder" />
<script>
function testAttribute(element, attribute)
{
var test = document.createElement(element);
if (attribute in test)
return true;
else
return false;
}
if (!testAttribute("input", "placeholder"))
{
window.onload = function()
{
var demo = document.getElementById("demo");
var text_content = "No Placeholder support";
demo.style.color = "gray";
demo.value = text_content;
demo.onfocus = function() {
if (this.style.color == "gray")
{ this.value = ""; this.style.color = "black" }
}
demo.onblur = function() {
if (this.value == "")
{ this.style.color = "gray"; this.value = text_content; }
}
}
}
</script>
上面“testAttribute”功能是为了测试一个元素的一个属性是由一个web浏览器。在本例中,我们想知道您的web浏览器支持“占位符”“输入”元素的属性。
如果“不支持占位符,我让浏览器运行一些Javascript代码创建这样一个占位符,您可以使用自己的Javascript,而不是我的,(我的代码创建展示,可能不适合生产)