使用jQuery快速解決input中placeholder值在ie中無(wú)法支持的問(wèn)題
<!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>無(wú)標(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的無(wú)刷新分頁(yè)技術(shù)，需要的朋友可以參考下。2011-06-06
jQuery使用一個(gè)按鈕控制圖片的伸縮實(shí)現(xiàn)思路
上一篇講解了jquery同時(shí)控制四張圖片的伸縮，想必大家對(duì)伸縮有一定了解了，本文將為大家介紹下使用按鈕控制圖片的伸縮，感興趣的朋友可以參考下哈2013-04-04
一個(gè)用jquery寫的判斷div滾動(dòng)條到底部的方法【推薦】
下面小編就為大家?guī)?lái)一篇一個(gè)用jquery寫的判斷div滾動(dòng)條到底部的方法【推薦】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧2016-04-04
讓jQuery Mobile不顯示討厭loading界面的方法
jQuery Mobile總是顯示討厭的loading界面，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下2014-02-02
JQuery 自定義CircleAnimation，Animate方法學(xué)習(xí)筆記
最近對(duì)看了一些JQuery的基礎(chǔ)教程，被JQuery深深的吸引住了，以前用過(guò)Extjs，看了JQuery不禁感嘆，javascript還能這么些，真是太神奇了！2011-07-07
jQuery Validate 相關(guān)參數(shù)及常用的自定義驗(yàn)證規(guī)則
這篇文章主要介紹了jQuery Validate 相關(guān)參數(shù)及常用的自定義驗(yàn)證規(guī)則,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
JQuery 進(jìn)入頁(yè)面默認(rèn)給已賦值的復(fù)選框打鉤
這篇文章主要介紹了JQuery 進(jìn)入頁(yè)面默認(rèn)給已賦值的復(fù)選框打鉤的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-03-03
jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery模擬html下拉多選框的原生實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了jQuery動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)select下拉框效果的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了JS與jQuery實(shí)現(xiàn)隔行變色的方法,結(jié)合實(shí)例形式對(duì)比分析了javascript與jQuery實(shí)現(xiàn)隔行變色的具體操作步驟與相關(guān)技巧,體驗(yàn)一下jQuery的華麗與簡(jiǎn)潔,需要的朋友可以參考下2016-09-09
jQuery實(shí)現(xiàn)彈窗下底部頁(yè)面禁止滑動(dòng)效果
在項(xiàng)目開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)遇到帶有彈窗的頁(yè)面，尤其是在移動(dòng)端。下面通過(guò)本文給大家分享jQuery實(shí)現(xiàn)彈窗下底部頁(yè)面禁止滑動(dòng)效果，需要的朋友參考下吧2017-12-12