ie9 placeholder兼容代码方法
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
function placeholderIe() {
function isPlaceholder() {
var input = document.createElement('input');
return 'placeholder' in input;
}
if (!isPlaceholder()) { //不支持placeholder 用jquery来完成
$(document).ready(function() {
if (!isPlaceholder()) {
$("input,textarea").each(
function() {
if ($(this).val() == "" && $(this).attr("placeholder") != null) {
var self = this;
var onlyId = guid();
$(self).attr("data-pid", onlyId)
function gen() {
var x = $(self)[0].offsetLeft;
var y = $(self)[0].offsetTop;
var h = $(self).height();
var left = parseInt(x) + 10;
var html = '<span id="' + onlyId + '" class="holder-span" style="left:' + left + 'px;top:' + y + 'px;line-height:' + h + 'px">' + $(self).attr("placeholder") + '</span>';
$(self).parent().append($(html))
}
gen()
$(this).focus(function() {
$("#" + onlyId + "").hide()
});
$(this).blur(function() {
if ($(this).val() == "" && $(this).attr("placeholder") != "") {
$("#" + onlyId + "").show()
}
});
$("#" + onlyId + "").click(function() {
$(this).hide()
if ($(self).attr("data-pid") == onlyId) {
$(self).focus()
}
});
}
});
}
});
}
}
ie9 placeholder兼容代码方法的更多相关文章
- ie9 placeholder兼容
.phcolor{ color:#999;}//css样式 function isPlaceholer(){ var input = document.createElement("inpu ...
- placeholder在不同浏览器下的表现及兼容方法 placeholder兼容
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
- IE9以下 placeholder兼容
//input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...
- placeholder兼容方法(兼容IE8以上浏览器)
//placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...
- placeholder 兼容 IE
placeholder 是 html5 的新属性,仅支持 html5 的浏览器才支持 placeholder,目前最新的 FF.Chrome.Safari.Opera 以及 IE10 都支持,IE6- ...
- JS---DOM---为元素绑定事件的引入,为元素绑定多个代码,兼容代码
1. 为元素绑定事件的引入: 用src直接绑定多个,只实现最后一个(programmer2.js) <input type="button" value="按钮&q ...
- ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- placeholder兼容
<!------------placeholder兼容-------------><script type="text/javascript"> $( ...
- js基础 - 兼容代码
js基础 - 兼容代码 . scrollTop . chrome document.body.scrollTop . IE && firefox document.documentEl ...
随机推荐
- Scala基础学习(一、数据类型)
Scala 支持的数据类型: 数据类型 描述 Byte 8位有符号补码整数.数值区间为 -128 到 127 Short 16位有符号补码整数.数值区间为 -32768 到 32767 Int 32位 ...
- 常见JS倒计时
https://www.jb51.net/Special/356.htm //JS倒计时 <button onclick="resetTime(60)">启动倒计时 ...
- maya模板lock工具
#lockTemple import maya.cmds as mcimport stringif mc.window('LockWin',ex=1)==1: mc.deleteUI(' ...
- git 取消文件跟踪
1.共享式忽略 git库路径下的.gitignore文件 2.独享式忽略 git库路径下的.git/info/exclude ,第一次需要自己创建exclude文件 然后将要忽略的文件名加到上面的 ...
- 家人的健康和offer的取舍
记得2月份去Amazon面试的时候,小孩子正莫名的发烧,已经破纪录的连续烧了4天,到了6点面试完毕,面试官还试探性的问我还有没有什么要聊的,当时确实是没了心情,就想着回家看小病人,在回家的路上,暗暗的 ...
- win10 uwp 读取resw资源文件
ResourceContext resourceContext = ResourceContext.GetForViewIndependentUse(); ResourceMap resourceMa ...
- java的接口
接口(英文:Interface),在JAVA编程语言中是一个抽象类型,是抽象方法的集合,接口通常以interface来声明.一个类通过继承接口的方式,从而来继承接口的抽象方法. 接口并不是类,编写接口 ...
- linux下目录简介——/sys
Linux下/sys目录介绍 1. 概述 ramdisk 文件系统基于磁盘模拟技术,实际文件系统是ex2 ex3等.sysfs是一种基于ram文件系统和proc一样.Sysfs文件系统是一个类似 ...
- python查询mysql并生成excel表
需求说明 开发不愿意单独为某个项目做后台 并且运营那边需要合并多个表的数据 因此找上了我. 要求每周执行一次.月初也执行一次 要查询2个mysql数据库多个表并生成excel表 我的想法 找开发要sq ...
- k8s之Hello World(四)
实例:Guestbook留言板系统将通过Pod.RC.Service等资源对象搭建完成,成功启动后在网页中显示一条“Hello World”留言.其系统架构是一个基于PHP+Redis的分布式Web应 ...