IE678910不兼容H5的placeholder属性,需要JS解决
两种方法的思路
一、使用input的value作为显示文本
二、不使用value,添加一个额外的span标签,绝对定位覆盖到input上面。
两种方式各有优缺点,方法一占用了input的value属性,表单提交时需要一些额外的判断工作,方法二则使用了多余的标签。
placeholder=function(input){
var text=input.getAttribute('placeholder_t'),
defaultValue=input.defaultValue;
if(defaultValue==''){
input.value=text;
input.style.color='#c0c0c0';
}
input.onfocus=function(){
if(input.value===text)
{
this.value='';
input.style.color='#000000';
}
};
input.onblur=function(){
if(input.value===''){
this.value=text;
input.style.color='#c0c0c0';
}
}
}
placeholder(document.getElementById("slbh"));
placeholder(document.getElementById("cxmm"));
IE678910不兼容H5的placeholder属性,需要JS解决的更多相关文章
- [干货]兼容HTML5的Placeholder属性-更新版v0.10102013
HTML5对Web Form做了许多增强,比如input新增的type类型.Form Validation等.Placeholder是HTML5新增的另一个属性,当input或者textarea设置了 ...
- ie8不兼容input的placeholder属性但是要实现其效果的方法
通过学习前辈的思想,个人想法整理如下: 通过两个元素标签,仿造出placeholder的内容 使用position定位好两个元素标签 第一要隐藏两个元素标签display:none,在<!--[ ...
- 修复IE9.0下PlaceHolder 属性问题js脚本
在开发前端系统时候碰到这种兼容问题,以下是个人解决方案,希望能给其他人带来帮助: var JPlaceHolder = { //检测 _check: function () { return 'pla ...
- 兼容ie10以下版本的placeholder属性
<script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...
- placeholder属性兼容ie8
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- IE如何兼容placeholder属性
在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下 ...
- input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- HTML5表单提示placeholder属性兼容IE
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
随机推荐
- SQL Server乱码处理(ASCII)
CREATE FUNCTION [dbo].[RegexReplace] ( @string VARCHAR(MAX), --被替换的字符串 @pattern VARCHAR(255), --替换模板 ...
- Android学习笔记 Toast屏幕提示组件的使用方法
activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- SQL语句也可以重构优化
真的,不管是程序中的代码可以重构优化,在SQL Server的语句,也是可以的.下面举个例子,在存储过程中,所传入的数据参数不能为空,另外在对数据表进行更新时,所更新的字段如果是空的话,就更新,如果传 ...
- 数组中 reduce累计运算
let arr = [1,2,3,4]; let sum = (a, b) => a + b; arr.reduce(sum, 0); 最后输出10
- shipyard
https://www.ivankrizsan.se/2016/07/10/managing-containers-shipyard/ kubernetes中文社区:https://www.kuber ...
- 757. Set Intersection Size At Least Two
An integer interval [a, b] (for integers a < b) is a set of all consecutive integers from a to b, ...
- 使用python-docx生成Word文档
首先是安装python-docx:(centos环境) pip install python-docx 基本方法使用: from docx import Document from docx.shar ...
- 【bzoj3601】一个人的数论 莫比乌斯反演+莫比乌斯函数性质+高斯消元
Description Sol 这题好难啊QAQ 反正不看题解我对自然数幂求和那里是一点思路都没有qwq 先推出一个可做一点的式子: \(f(n)=\sum_{k=1}^{n}[(n,k)=1]k^d ...
- selenium定位元素提示‘元素不可见’问题解决方法
最近在使用selenium的过程中发现有元素能够在页面中查找到,但是pycharm中运行时始终报错element not visible,于是使用如下方法成功解决问题. 1.driver.find_e ...
- Python3之random模块
一.简介 ramdom模块提供了一个随机数的函数:random() 它可以返回一个随机生成的实数,范围在[0,1)范围内.需要注意的是random()是不能直接访问的,需要导入模块random才可以使 ...