HTML5 placeholder在低版本浏览器的解决方法

HTML5 <input>属性placeholder：提供可描述输入字段预期的提示信息。该提示会在输入字段为空显示，并会在字段获取焦点时消失,并且val里的值为空。

但是placeholder属性在ie9及以下浏览器不支持我的解决方案是：

判断浏览器是否支持placeholder属性，如果不支持就获取所有placeholder属性的标签，进行赋值，但是password需要转换为text才能显示文本信息，于是我就多做了一层判断

function placeholderSupport() {return 'placeholder' in document.createElement('input');}$(function () {if (!placeholderSupport()) {   // 判断浏览器是否支持 placeholder$("input[placeholder]").each(function (k, v) {if ($(v).attr("type") == "text") {$(v).val($(v).attr("placeholder"));$(v).focus(function () {if ($(v).val() == $(v).attr("placeholder") || $(v).val() == "") {$(v).val("");}}).blur(function () {//$(v).val($(v).attr("placeholder"));if ($(v).val() == $(v).attr("placeholder") || $(v).val() == "") {$(v).val($(v).attr("placeholder"));}});} else if ($(v).attr("type") == "password") {$(v).attr("type", "text");$(v).val($(v).attr("placeholder"));$(v).focus(function () {if ($(v).val() == $(v).attr("placeholder") || $(v).val() == "") {$(v).attr("type", "password");$(v).val("");}}).blur(function () {if ($(v).val() == $(v).attr("placeholder") || $(v).val() == "") {$(v).attr("type", "text");$(v).val($(v).attr("placeholder"));}});}});};})

HTML5 placeholder在低版本浏览器的解决方法相关推荐

Vue-CLI3.x 高版本覆盖低版本Vue-CLI2.x 解决方法
Vue-CLI3.x 高版本覆盖低版本Vue-CLI2.x 解决方法参考文章: (1)Vue-CLI3.x 高版本覆盖低版本Vue-CLI2.x 解决方法 (2)https://www.cnblog ...
html5标签兼容低版本浏览器
随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼. 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元 ...
兼容低版本浏览器的一些方法
页面滚动的兼容方法 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
解决ie8及低版本浏览器不支持html5标签属性
html5新标签<head>.<nav>.<footer>兼容性 - 经验小结,处理方案 IE支持: IE8或更早的版本不支持HTML5的<nav>标签 ...
jQ进阶篇--jQuery封装placeholder效果，让低版本浏览器支持该效果
页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...
解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
java学习笔记——众筹项目练习——项目中的忘记密码（密码找回）与记住我（自动登录）功能和返回json数据低版本浏览器显示下载问题的解决、众筹系统架构重构
忘记密码(密码找回) 忘记密码(密码找回)这个功能可以说是目前所有为别人提供服务的软件系统都具备的基础功能啦!很普遍,因为总 ...
低版本浏览器兼容处理
1.HTML5新标签对IE低版本浏览器的兼容处理问题概述:IE8浏览器中还没有添加对HTML5新标签的支持,当在页面中使用HTML5新标签时,新标签不兼容 1)使用JavaScript新增元素的方法 ...
AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器
AngularJS本地化,国际化国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

HTML5 placeholder在低版本浏览器的解决方法

HTML5 placeholder在低版本浏览器的解决方法相关推荐

最新文章

热门文章