首页 > 代码库 > 让IE支持placeholder属性，跨浏览器placehoder

让IE支持placeholder属性，跨浏览器placehoder

2024-07-13 05:13:25   221人阅读

在html5中，文本框，也就是input， type为text，或者password，新增了一个属性placeholder，也就是占位符，以下是firefox浏览器下的表现形式，当输入的时候，占位符就会消失。这个属性非常好用，因为有这个必要html5才会因素这个属性，然而在IE下，就没有这效果，以下是IE9的表现。

下面是JS版：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>跨浏览器placehoder</title>
<meta name="author" content="ifrans.cn" />
<meta name="description" content="跨浏览器的placehoder原生js版,让ie也支持placehoder" />
<meta name="keywords" content="跨浏览器,placehoder,ie,原生js,表单" />
<style>
body{font:12px/1.5 Arial,"\5b8b\4f53", sans-serif;-webkit-text-size-adjust:100%;color:#333333;background:white;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%; font-weight:normal; font-style:normal;}
table{border-collapse:collapse;border-spacing:0;font-size:100%;font:inherit;empty-cells:show}
fieldset,img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal; font-weight:normal;}
button,input,select,textarea{font-family:Arial, Helvetica, sans-serif;text-decoration: none;outline:none;-moz-outline:none;font-size:100%;}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{vertical-align:middle;-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{resize:none;overflow:auto;vertical-align:top}
ul,ol,li,dl{list-style-type:none;}         i,em{font-style:normal}     svg:not(:root){overflow:hidden}
img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;-webkit-tap-highlight-color:rgba(0,0,0,0);}   
a{color:#333;text-decoration: none;outline:none;} 
a:link {color:#333;} 
a:visited {color:#333;} 
a:hover {color:#c00;text-decoration:underline;}
a:active{blr:expression(this.onFocus=this.blur())}
a:focus {outline:none;-moz-outline:none;}
form{ width:300px;  margin:20px auto 0;}
h3{ font-weight:bold; margin:10px 0;}
p{ margin-bottom:10px;}
input{ vertical-align:middle; margin-left:10px; height:24px; line-height:24px; width:200px; padding-left:2px; border:1px #CCC solid;}
textarea{ vertical-align:middle; margin-left:10px; width:200px; height:50px; font:inherit; padding-left:2px; border:1px #CCC solid;}
.wrap-statistics{ visibility:hidden;}
.dn{ display:none;}   .db{ display:block;}
.finps{ width:200px; height:24px;line-height:24px; border:1px #C30 solid; padding:0 5px; color:#000;}
.oinps{width:200px; height:24px;line-height:24px; border:1px #CCC solid; padding:0 5px; color:#000;z-index:5;}
.ftext{ width:200px; height:50px; border:1px #C30 solid; padding:0 5px; color:#000;}
.otext{width:200px; height:50px; border:1px #CCC solid; padding:0 5px; color:#000;}
</style>
</head>
<body>
<form id="form1">
    <h3>通过input方式模拟placeholder</h3>
    <p><label for="username1">用户名:</label><input type="text" name="username1" class="tst oinps"  placeholder="请输入用户名" value=http://www.mamicode.com/"123" >
>


联系
我们