使用jQuery快速解決input中placeholder值在ie中無法支持的問題
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
//第一種方法
$(document).ready(function(){
var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(input){var text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text}
input.onfocus=function(){
if(input.value===text){this.value=''}};
input.onblur=function(){if(input.value===''){this.value=text}}};
if(!supportPlaceholder){
for(var i=0,len=inputs.length;i<len;i++){var input=inputs[i],text=input.getAttribute('placeholder');
if(input.type==='text'&&text){placeholder(input)}}}});
//第二種方法
$(function(){
if(!placeholderSupport()){ // 判斷瀏覽器是否支持 placeholder
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
};
})
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
</script>
</head>
<body>
<form>
<label for="name">用戶名：</label>
<input type="text" placeholder="請(qǐng)輸入用戶名"/>
</form>
</body>
</html>
- js兼容的placeholder屬性詳解
- js模仿html5 placeholder適應(yīng)于不支持的瀏覽器
- javascript 文本框水印/占位符(watermark/placeholder)實(shí)現(xiàn)方法
- 讓低版本瀏覽器支持input的placeholder屬性(js方法)
- 兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果
- IE下支持文本框和密碼框placeholder效果的JQuery插件分享
- 基于jQuery的讓非HTML5瀏覽器支持placeholder屬性的代碼
- jQuery實(shí)現(xiàn)的placeholder效果完整實(shí)例
- jQuery實(shí)現(xiàn)的一個(gè)自定義Placeholder屬性插件
- jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
- 基于JS實(shí)現(xiàn)html中placeholder屬性提示文字效果示例
相關(guān)文章
這篇文章主要介紹了jquery通過索引值操作html元素的代碼,需要的朋友可以參考下2023-05-05
jQuery 點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能的實(shí)現(xiàn)代碼
jQuery獲取當(dāng)前鼠標(biāo)相對(duì)位置坐標(biāo)和點(diǎn)擊圖片跳轉(zhuǎn)上一張或下一張功能2010-03-03
這篇文章主要介紹了jQuery實(shí)現(xiàn)的漂亮表單效果代碼,實(shí)例分析了jquery模擬快遞表單效果的實(shí)現(xiàn)方法,整體效果美觀大方,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
jQuery獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法
獲取當(dāng)前對(duì)象標(biāo)簽名稱的方法有很多，本教程為大家介紹下使用jquery獲取的具體實(shí)現(xiàn)2014-02-02
jQuery Dialog對(duì)話框事件用法實(shí)例分析
這篇文章主要介紹了jQuery Dialog對(duì)話框事件用法,結(jié)合實(shí)例形式分析了Dialog對(duì)話框?qū)崿F(xiàn)的靜態(tài)提示類對(duì)話框、動(dòng)態(tài)提示類對(duì)話框以及遮罩類對(duì)話框的概念、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-05-05
jquery zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例分享
這篇文章主要為大家詳細(xì)介紹了jquery zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例，感興趣的小伙伴們可以參考一下2016-03-03
實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
下面小編就為大家?guī)硪黄獙?shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jQuery將表單序列化成一個(gè)Object對(duì)象的實(shí)例
下面小編就為大家?guī)硪黄猨Query將表單序列化成一個(gè)Object對(duì)象的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
今天在工作中需要用到j(luò)Query組件里面的TomBox，可是發(fā)現(xiàn)以往做的Tombox失效了2010-06-06![前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等]（持續(xù)更新）](http://img.jbzj.com/images/xgimg/bcimg9.png)
前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等]（持續(xù)更新）
在公司做這個(gè)項(xiàng)目已經(jīng)6個(gè)多月了，總結(jié)一些問題，也算是拋磚引玉吧，希望更多的朋友一起分享一些技巧。2010-03-03