Get the App
SLTechnology News&Howtos  ›  Development  › 

How to make plug-ins that support the placeholder attribute of Html5 under IE

Shulou Source: shulou.com Published: 2022-06-03 08:44:35 11月15日 Update

这篇文章将为大家详细讲解有关如何让IE下支持Html5的placeholder属性的插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。

Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 , 唯独IE存在违和感啊!

例如:

介绍一个超强的让IE下支持placeholder的属性插件,同时也兼容其他不支持placeholder的浏览器,代码如下:

代码如下:

$(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

Tags: Attributes support code plug-ins articles content text more tips good practical no only multiple effects files text articles browsers Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno Huawei vpn macOS MariaDB Redmi