Placeholder 表单提示文本兼容性解决方案

发布于 2019-05-02 08:41:48 字数 2963 浏览 1581 评论 0

表单作为和用户交互的网页标签元素,一般都有提示性的文字,标识用户如何操作和填写表单,而在以往的网页开发中,一般都使用 JavaScript 脚本控制这个文字的显示和隐藏,而 HTML5 给我们带来了一个新的属性 Placeholder。

什么是 Placeholder?

Placeholder 是 HTML5 新增的一个表单标签属性,当 input 或者 textarea 设置了该属性后,该属性的值将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字自动消失。

Placeholder 兼容性

由于 Placeholder 是 HTML5 的新属性,所以只能兼容支持 HTML5 的浏览器,例如IE8以下的浏览器就无法显示,设置了该属性,表单元素没有任何变化。  截图数据来自网站:http://caniuse.com 由上图的数据可以得知,目前最新的 Firefox、Chrome、Safari 以及 IE10 都支持,IE6 到 IE9 都不支持,Placeholder 的文字在各个浏览器下基本都是淡灰色显示。 不同的地方在于,在Firefox和Chrome下,输入框获得焦点时,Placeholder 文字没有变化,只有当输入框中输入了内容时,Placeholder 文字才消失;而在 Safari 和 IE10 下,当输入框获得焦点时,Placeholder文字便立即消失。

修改 Placeholder 文本颜色

默认情况下,Placeholder 的文字是灰色,输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么,如何修改 Placeholder 的色值呢? 如果直接写input{color:red;},IE10 和 Firefox下,Placeholder 文字和输入文字都变成了红色,在 Chrome 和 Safari 下,Placeholder 文字颜色不变,只有输入的文字变成红色。 显然,这种做法是行不通的。因为我们只想改变 Placeholder 文字的颜色,并不想改变输入文字的颜色。正确的写法如下:

::-moz-placeholder{color:red;}              //Firefox
::-webkit-input-placeholder{color:red;}     //Chrome,Safari
:-ms-input-placeholder{color:red;}          //IE10

使 Placeholder 兼容所有浏览器

前面我们知道了,IE6 到 IE9 并不支持原生的 Placeholder,并且即使在支持原生 Placeholder 的浏览器上,其表现也并不一致。在实际项目中,如何使所有浏览器都一致地支持 Placeholder呢?

1、如果只需要让不支持 Placeholder 的浏览器能够支持改功能,并不要求支持原生 Placeholder 的浏览器表现一致,那么可以采用如下方法:

function placeholder(nodes,pcolor) {
  if(nodes.length && !("placeholder" in document_createElement("input"))){
    for(i=0; i<nodes.length; i++){
      var self = nodes[i], placeholder = self.getAttribute('placeholder') || '';     
      self.onfocus = function(){
        if(self.value == placeholder){
          self.value = '';
          self.style.color = "";
        }
      }
      self.onblur = function(){
        if(self.value == ''){
          self.value = placeholder;
          self.style.color = pcolor;
        }
      }
      self.value = placeholder;
      self.style.color = pcolor;             
    }
  }
}

2、如果需要自定义样式,并且希望 Placeholder 在所有浏览器下表现一致,可以通过利用 label 标签模拟一个 Placeholder 的样式放到输入框上,当输入框获得焦点的时候隐藏 label,当输入框失去焦点的时候显示 label。

<script>
$(function(){
  $('.for_text').click(function(){
    $('.text').focus()
  })
  $('.text').blur(function(){
    $('.for_text').hide();
  })
})
</script>
<style>
.for_text{ position:absolute; cursor:text; margin:5px; color:#999;}
.text{ padding:5px;}
</style>
<form>
<label for="text" class="for_text">请输入文本</label>
<input type="text" name="text" class="text"/>
</form>

3、最后一种方法,也是使用最常见的,但是不能改变文本的颜色,使用脚本的方式判断文本框的值,获取焦点或者输入文本的时候,如果为预设的值,那么就清空文本框,失去焦点的时候,如果文本框的值为空,则替换为我们预设的值。

<input type="text" name="text" value="请输入文本" class="text"
onFocus="if(this.value=='请输入文本') this.value = ''"
onBlur="if(this.value=='') this.value='请输入文本'"
/>

实现方法有很多种,欢迎在评论里面各抒已见,期待你的新创意。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。