i8浏览器不支持placeholder属性解决办法,以及解决后,文字不居中问题
这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失。
1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码:
- <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入企业名称、统一社会信用代码或注册号"
- onfocus='if(this.value=="请输入企业名称、统一社会信用代码或注册号"){this.value="";}; '
- onblur='if(this.value==""){this.value="请输入企业名称、统一社会信用代码或注册号";};'>
其实onfocus属性挺好用的,还可以在通过onfocus属性改变css样式,如下代码:
- <input id="keyword" name="keyword" size="10" class="inputstyle keywords" value="请输入关键字进行搜索"
- onfocus='if(this.value=="请输入关键字进行搜索"){this.value="";}; this.className="input01"'
- onblur='if(this.value==""){this.value="请输入关键字进行搜索";}; this.className="input02"'>
在这个问题解决了以后,可能会出现文字不居中的问题,这时候只需要使用一个属性就可以,例如 line-height: 40px
2.也可以使用jquery实现:
- $(document).ready(function() {
- var vdefault = $('#keyword').val();
- $('#keyword').focus(function() {
- //获得焦点时,如果值为默认值,则设置为空
- if ($(this).val() == vdefault) {
- $(this).val("");
- }
- });
- $('#keyword').blur(function() {
- //失去焦点时,如果值为空,则设置为默认值
- if ($(this).val()== "") {
- $(this).val(vdefault); ;
- }
- });
i8浏览器不支持placeholder属性解决办法,以及解决后,文字不居中问题的更多相关文章
- 当浏览器不支持placeholder,所执行的函数
$(function(){ //判断浏览器是否支持placeholder属性 supportPlaceholder='placeholder'in document.createElement('in ...
- 在IE8等不支持placeholder属性的浏览器中模拟placeholder效果
placeholder是一个很有用的属性,可以提示用户在input框中输入正确的内容,但是IE8以及IE8一下的浏览器不支持该属性,我们可以使用js来模拟相似的效果.下面直接上代码: <!doc ...
- input date 支持placeholder属性
第一种解决方法:IE,火狐浏览器,不支持input date的日历功能,火狐支持日历功能 ie,火狐,谷歌显示placeholder属性 css代码 #dateofday:before{ col ...
- 让ie8支持 placeholder 属性
一. ie8支持 placeholder 属性 /* * ie8支持 placeholder 属性 */ $(function(){ if( !('placeholder' in document. ...
- 关于使用jquery时,ie8下提示对象不支持的属性或方法的解决办法
转自:http://wapapp.baidu.com/auoong/item/538790fcbe87c834d7ff8cde 首先这个问题的前提是已经排除了常见的这个问题.下面说一种今天我碰到的一种 ...
- 对象不支持“attachEvent”属性或方法的解决办法
有些脚本在IE11下执行会报错误: 对象不支持“attachEvent”属性或方法 解决办法 解决办法:把attachEvent改为addEventListener即可
- ecshop transport.js IE报错(608行),对象不支持此属性或方法 的解决办法
解决办法: 将if (this.hasOwnProperty(k)) { 改为: if (this.hasOwnProperty && this.hasOwnProperty(k)) ...
- 基于jquery 的插件,让IE支持placeholder属性
开发一个项目的时候为了美观和用户体验用到了input标签的placeholder属性,但是这个属性是html5中的,所以低版本的IE浏览器不支持.于是在百度找了一些解决方法,找了好几个都不是那么完美, ...
- 有关ie9 以下不支持placeholder属性以及获得焦点placeholder的移除
(一)placeholder 属性起到提示客户输入信息作用 (二)ie9以下出问题了 placeholder不支持 (三)解决办法 先贴html 加上jquery代码就可以了 关于表单获取焦点,chr ...
随机推荐
- linux 安装redis和集群
一.安装redis单机 1.安装编译环境 Redis是c语言开发的. 安装redis需要c语言的编译环境.如果没有gcc需要在线安装.yum install gcc-c++ 2.安装步骤: 第一步:r ...
- 【题解】洛谷P3205【HNOI2010】合唱队
洛谷 P3205:https://www.luogu.org/problemnew/show/P3205 复习区间DPing 思路 把理想队列拆分成 第一个和后面几个 划分成求后面几个的理想队列 最后 ...
- MapFile
MapFile是排序后的SequenceFile, 这个排序是由开发者来保证的, 不是内存实现. 相当于对key作了一个分块索引, 只针对key. 缺点 1.文件不支持复写操作,不能向已存在的Seq ...
- Java实现双向冒泡排序
public class BubbleSort_Two { public static void bubbleSort_Two(int[] list){ //j在最外层定义 boolean needN ...
- jmeter 填写URL链接后 不能有多余的空格。
- Python3集成安装xadmin
Python3集成安装xadmin1:创建虚拟环境C:\Users\Adminstrator>mkvirtualenv -p C:\Python34\python.exe MyDjango如果提 ...
- (转)阿里巴巴Druid数据源及使用
原文链接:https://blog.csdn.net/yanguo110/article/details/68944659 第一部分:数据源的集中比较. 目前常用的数据源主要有c3p0.dbcp.pr ...
- 路由器基础配置之ppp封装下的pap,chap认证
我们将以上面的拓扑图完成本次实验,路由器的默认封装为HDLC,要求为把路由器全被更改为ppp封装,并在router3与router4之间用pap认证,在router4与router5之间用chap认证 ...
- android 自定义滑动按钮
第一接触公司项目就让我画页面,而且还涉及到我最讨厌的自定义view 但是没办法,讨厌也必须要做啊,经过百度上资源的查找,终于写出了一个滑动控件.废话不多说,上代码. package com.eton ...
- ubuntu多版本php切换
最近想要学习一下swoole,虽然机子上装的是php7.0,但是考虑到一些有关swoole的轮子要依赖更高版本(例如swooletw),所以就在机子上升级了php7.2,下面是在网上搜索或者自己折腾出 ...