【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-16 18:51   310   0

placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。placeholder 属性适用于以下类型的 input 标签:text, search, url, telephone, email 以及 password。

我们先看下在谷歌浏览器中的效果,如图所示:

获得焦点时:

输入字段:

因为是 html5 属性,自然低版本的浏览器比如 ie6-8 不兼容。下面就介绍下如何在低版本浏览器中显示以上效果,话不多说直接上代码。

html:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>基于 jquery 实现 ie 浏览器兼容 placeholder 效果</title>
    <style>
    *{margin:0;padding:0;}
    .txt{position:relative;font-size:12px;margin:10px;}
    .txt input{border:1px solid #ccc;height:30px;line-height:30px;padding:0 10px;width
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP