解決Placeholder的IE8相容問題

阿新 • • 發佈：2019-02-14

本篇文章主要介紹了使用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>無標題文件</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="請輸入使用者名稱"/>
</form>
</body>
</html>

*********************************其他方法*********************************

<script type="text/javascript">
if( !('placeholder' in document.createElement('input')) ){
$('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder');
if(that.val()===""){
that.val(text).addClass('placeholder');
}
that.focus(function(){
if(that.val()===text){
that.val("").removeClass('placeholder');
}
})
.blur(function(){
if(that.val()===""){
that.val(text).addClass('placeholder');
}
})
.closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});
}
</script>

瀏覽器相容（不是本質上解決瀏覽器相容問題，只是一個招數）

現在大部分的javaweb專案都是要求相容ie，這個對於我這個初級程式設計師來說很痛苦，因為很多的東西樣式，js的方法都是不相容ie的，比如css裡面的漸變色，旋轉特效等等，這個時候客戶肯定是不滿意的，但是其實可以利用一種方式來解決，因為我們在開發的時候，一般都是使用谷歌瀏覽器來做開發，我們做的樣式

PHP 解決ueditor相容問題

預設情況下，ueditor的內容通過PHP匯入到DB中，會將內容中的html進行轉義操作，此時讀取顯示就會有問題 step 1: $content = htmlspecialchars_decode($content); 傳入DB之前對內容進行普通字元轉換 step 2: 使用initalCo

超出字數部分省略(主要解決不相容;display: -webkit-box;的瀏覽器)多謝

註明：內容於http://www.cnblogs.com/chentongtong/p/5474553.html進一步整理。 1、現webkit核心的瀏覽器支援display: -webkit-box;屬性，所以網頁中顯示兩行文字，超出部分省略，可以用樣式 overflow:

解決IE11相容HTML5 設定

最近做一個Webhtml5網站，在chrome,firefox,safari,opera，360瀏覽器（極速模式）、搜狗瀏覽器等瀏覽器下均沒有問題，而在IE8及IE11下發現樣式無法顯示，然後各種百度啊，最後在雅朋網的一個網友帖子的幫助下解決了問題，現在將解決方法總

es6如何解決不相容問題

ajaxfileupload.js解決瀏覽器相容問題

IE、Chrome選擇附件後文本框值丟失問題描述：檢視ajaxFileUpload.js原始碼：由此分析：此外掛會把原來的file元素重新替換成新的file元素，因此之前繫結的change事件就失效了。解決方法：由於安全考慮，在IE和chro

js複製當前url地址解決瀏覽器相容

1.網上搜索的js複製連結程式碼，好像只能支援ie瀏覽器，其他瀏覽器不支援，案例： var url=12; if(window.clipboardData){

如何解決MathType相容Office 2016(word匯入mathtype)

現在MathType的使用者越來越多，使用它可以很方便地編輯公式，但是有朋友發現MathType與Office 2016不能夠很好好相容，那麼怎樣能夠使MathType相容Office 2016呢？

移動端html5頁面長按實現高亮全選文字內容的相容解決方案

最近需要給html5的WebAPP在頁面上實現一個複製功能：使用者點選長按文字會全選文字並彈出系統“複製”選單，使用者可以點選“複製”進行復制操作，然後貼上到AppStore搜尋對應的應用。之所以不是採用連結形式直接跳轉到AppStore對應應用是為了通過使用者的主動輸入關鍵詞搜尋給推廣的企業App

解決win10音效卡驅動不相容問題和成功安裝戰神k650-i5-d2上的Sound Blaster Cinema2在win10系統上

安裝win10後，偶爾會出現藍屏，經過我的發現，每次聽歌用揚聲器並且長時間。都會發生藍屏 1 . 所以懷疑音效卡驅動VIA HD Audio（Win 8.1）與系統不相容。 2 .乾脆重新安裝音效卡驅動。在網上找到與win10相容的VIAHDAud_v11_1100e_01

瀏覽器相容問題及解決方法彙總（持續更新......)

一、出現相容問題的原因：瀏覽器種類很多，但是區別主要在瀏覽器核心的不同，所以各核心對網頁的解析差異，是導致瀏覽器相容問題出現的主要原因。關於瀏覽器核心（browser kernel)，是瀏覽器最為核心

解決app在Android P中安裝失敗以及不相容問題

Android P即Android 9.0 在Google IO2018正式面向全球釋出，它的代號是Pie，仍然基於Linux核心構建。全新的手勢操作選項。底部虛擬鍵將由小白點和一顆返回鍵取代。通過輕觸回到主頁、長按撥出語音助手。新的特性主要有：利用 Wi-Fi RTT 進行室

解決IE、華為瀏覽器相容不了es6語法的解決辦法

1. main.js 直接引入 import 'babel-polyfill' 2.在 webpack 下 build資料夾 webpack.base.conf.js 下 entry 匯入模組 context: path

解決vue-cli build打包後CSS瀏覽器相容字首自動去除的問題

今天做練手專案部署的時候碰到了個奇怪問題，開發環境裡顯示得好好的CSS prefixer樣式，到production環境就消失了。我開發環境用的是 scss ，剛開始我還以為是 scss 處理器的問題，後來研究了下 build 指令碼，發現人家把CSS統一用一個外掛給壓縮了，然後追查之下發現這個外

解決ie6中png圖片格式不相容問題

在IE6中對圖片格式png24支援度不高，如果使用的圖片格式是png24，則會導致透明效果無法正常顯示解決方法：　　1.可以使用png8來代替png24，即可解決問題，但是使用png8代替png24以後，圖片的清晰圖會有所下降　　2.使用JavaScript來解決該問題，需要向頁面中引入一個外部的

解決 | 此資料庫檔案跟當前sql server例項不相容 & sql server2008無法連線到(local)

最近在搞ASP.NET，因實驗室VS版本跟PC不一樣可能，拷回來一開啟就這樣子：眉頭一皺的我開啟我的古董SQL，自從用了MySQL就沒碰它了我的鍋。。。果然。。連線的時候。。

解決隱式宣告與內建函式不相容問題終極“利器”

有時候，我們編譯程式碼時出現： gcc wserver.c -o wserver wserver.c: 在函式‘main’中: wserver.c:27:2: 警告：隱式宣告與內建函式‘memset’不相容 [預設啟用] memset( &servaddr, '\0',

IE9以下的相容問題解決方案

在網站開發中不免因為各種相容問題苦惱，針對相容問題，其實IE給出瞭解決方案Google也給出瞭解決方案百度也應用了這種方案去解決IE的相容問題百度原始碼如下 <!Doctype html> <html xmlns=http://www.w3.o

VMware Workstation 與 Device/Credential Guard 不相容解決方案

win10專業版官方解決方案 https://kb.vmware.com/s/article/2146361 win10家庭版解決方案 win10家庭版本身是不支援Hyper-V服務的，但是如果是“win10預覽體驗家庭版”，會在“服務”中發現有Hyper-V服務。解決方案：

自定義popupwindow相容7.0 （解決彈出位置問題）

import android.os.Build; import android.view.Gravity; import android.view.View; import android.widget.PopupWindow; public class MyPopupWindow ex

解決Placeholder的IE8相容問題

相關推薦