html5的Input Attr :Placeholder,大家还记得这个吗?

一个占位符是一个文本框,文本浅色当没有价值,不集中。

下面是一个占位符应如何看起来像如果没有输入值和文本框不是重点。(你看到的只是图片,而不是真正的占位符,不要点击它)


如果占位符只是可有可无的功能在您的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,而不是我的,(我的代码创建展示,可能不适合生产)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值