博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5的PLACEHOLDER属性
阅读量:4656 次
发布时间:2019-06-09

本文共 1518 字,大约阅读时间需要 5 分钟。

由于placeholder是个新增属性,目前只有少数浏览器支持,如何检测浏览器是否支持它呢

function hasPlaceholderSupport() {  return 'placeholder' in document.createElement('input');}

  

现在支持的浏览器有:Firefox4.0+、Chrome4.0+、Safari4.0+,Opera 11、IE9 RC2尚不支持。

默认提示文字是灰色的,可以通过CSS来改变文字样式:

/* all */::-webkit-input-placeholder { color:#f00; }input:-moz-placeholder { color:#f00; } /* individual: webkit */#field2::-webkit-input-placeholder { color:#00f; }#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* individual: mozilla */#field2:-moz-placeholder { color:#00f; }#field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }#field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

兼容其他不支持placeholder的浏览器:

var PlaceHolder = {    _support: (function() {        return 'placeholder' in document.createElement('input');    })(),     //提示文字的样式,需要在页面中其他位置定义    className: 'abc',     init: function() {        if (!PlaceHolder._support) {            //未对textarea处理,需要的自己加上            var inputs = document.getElementsByTagName('input');            PlaceHolder.create(inputs);        }    },     create: function(inputs) {        var input;        if (!inputs.length) {            inputs = [inputs];        }        for (var i = 0, length = inputs.length; i 

  

 

转载于:https://www.cnblogs.com/Caiyinsoft/archive/2012/12/18/2823197.html

你可能感兴趣的文章
第七章 数组实验
查看>>
003_ElasticSearch详解与优化设计
查看>>
windows hosts
查看>>
PHP 初学之登录查询小case
查看>>
Spring 4 官方文档学习(十五)CORS支持
查看>>
react学习笔记1
查看>>
Dao层设计
查看>>
css各种姿势的水平居中
查看>>
MYSQL 测试常用语句使用技巧
查看>>
基础细节知识
查看>>
树状数组求区间最大值
查看>>
一个简单的PHP网站结构
查看>>
Redis 学习之简介及安装
查看>>
jsp简单的学习
查看>>
[LeetCode][JavaScript]Number of 1 Bits
查看>>
[LeetCode][JavaScript]Plus One
查看>>
C语言-06复杂数据类型-01数组
查看>>
vue 图片预览插件
查看>>
深入解析:分布式系统的事务处理经典问题及模型
查看>>
python的2种字符串格式化输出
查看>>