解決IE中placeholder的相容問題

2022-07-20 15:21:11 字數 1325 閱讀 4514

定義和用法

placeholder 屬性提供可描述輸入字段預期值的提示資訊(

hint

)。該提示會在輸入欄位為空時顯示,並會在字段獲得焦點時消失。

注釋:placeholder 屬性適用於以下的

型別:text, search, url, telephone, email

以及 password

問題

由於placeholder 屬性是 html5 中的新屬性,所以ie10以下不支援該屬性,有問題就會有解決辦法,我的方法就是,利用label和input組合,去模擬實現placeholder屬性帶來的效果,具體步驟如下:

html**:

<

div

class

="texts

">

<

input

type

="text"

/><

label

for="text"

>毛巾 暖冬裝備

label

>

div>

css**:

.texts

.texts>input

.texts>label

js**:

var otexts=document.getelementsbytagname("input")[0];

var olabel=osearch.getelementsbytagname("label")[0];

/*文字框失去焦點時,此時若框內無值,則讓框內提示文字(也就是label)顯示,若框內有值,則隱藏提示文字*/

otexts.onblur=function()else

};//文字框獲得焦點時,讓提示文字(也就是label)隱藏

otexts.onfocus=function();

//點選提示文字時(也就是label),就讓文字框獲得焦點並且隱藏自己

olabel.onclick=function();

原理簡單而又巧妙,其實就是用乙個標籤去代替placeholder文字,用乙個div包裹文字標籤和label標籤(也可以是別的標籤),讓他們分別相對於父級定位,做出placeholder實現的效果,接著就是js的活兒了,我們要去分析在文字框獲得焦點、失去焦點這些過程中,都出現了哪些動效,再將這些邏輯語言化為js語言,其實不同的需求下,js**也會有所不同,只要掌握了原理,配到不同的需求,大家可以做出相應改變。

Vue專案相容IE的placeholder

一 前言 最近在做專案中的相容性處理,由於專案是spa專案,所以對於網上給出的第三方外掛程式解決方案不能滿足專案需求。實現思路 通過vue自定義指令的形式實現ie9及以下的placeholder相容。二 正文 由於專案中使用到了elementui 對於elementui元件也做了單獨處理,如下 va...

ie中new date 解決方案

在火狐下 可以正常取得時間,在ie7下 卻是 nan。糾結老長時間,放棄了new date 然後再老外的論壇中找了一段段 可以相容所有瀏覽器的格式化日期 var date1 new date str 在火狐下 可以正常取得時間,在ie7下 卻是 nan。糾結老長時間,放棄了new date 然後在老...

CSS 解決IE6中min width問題

參考資料 http www.webreference.com programming min width index.html ie6中的min width無效,而實際上,這是乙個很好很有用的屬性.怎麼解決呢?參考資料中的方法其實也很麻煩,需要新增兩個空div標籤.乙個是設定乙個大的邊框寬度 bor...